zoukankan      html  css  js  c++  java
  • css3中的radius

    css属性:border-radius ;border:边框;radius:弧度;所以这个属性的意思很明了。

    下面实现一个小demo:

    <!doctype html>
    
    <html>
    
    <head>
    
    <title>这里是标题的内容</title>
    
    <meta charset="utf-8"/><!--定义浏览器解析的方式-->
    
    <style rel="stylesheet" type="text/css">
    
    #box{
    
    width:200px;
    
    height:200px;
    
    border-radius:100px;
    
    background:red;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="box">实现一个圆形</div>
    
    </body>
    
    </html>
    
    ===================================================================
    
    用css属性去除导航栏多余的边框,示例:
    
    <!doctype html>
    
    <html>
    
    <head>
    
    <title>这里是标题的内容</title>
    
    <meta charset="utf-8"/><!--定义浏览器解析的方式-->
    
    <style rel="stylesheet" type="text/css">
    
    ul{
    
    list-style:none;
    
    }
    
    li{
    
    width:50px;
    
    height:20px;
    
    border-right:1px solid red;
    
    background:blue;
    
    }
    
    li:last-child{
    
    border:none;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <ul>
    
    <li>导航栏内容</li>
    
    <li>导航栏内容</li>
    
    <li>导航栏内容</li>
    
    <li>导航栏内容</li>
    
    </ul>
    
    </body>
    
    </html>
  • 相关阅读:
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    thinkphp使用foreach遍历的方法
    php中foreach中使用&的办法
    thinkphp做搜索功能
    数据库虚拟主机目录的配置文件
    网页响应式设计原理
    数据库常见远程连接问题
  • 原文地址:https://www.cnblogs.com/wmwPro/p/5287065.html
Copyright © 2011-2022 走看看