CSS深入理解之边框

迷茫
发布: 2017-03-25 10:28:47
原创
1333 人浏览过

border的属性

1.border-width:不支持百分比,支持关键字,thin(1px),medium(默认值,3px,默认值是3px的原因是只有当border是3px及以上时,border-style才有效

     果),thick(5px)

2.border-style:有不同值,下面分析分别为不同值时的应用

  a.solid:可以实现三角,梯形

<!DOCTYPE html><html><head>
    <title>用solid实现三角和梯形</title>
    <meta charset="utf-8">
    <style type="text/css">
        .triangle{
            width: 0px;
            height: 0px;
            border-style:solid;
            border-width: 50px;
            border-color: red transparent transparent transparent;

        }
        .trapezia{
            width: 40px;
            height: 40px;
            border-style: solid;
            border-width: 50px;
            border-color:transparent transparent green transparent ;
            margin-top: 10px;
        }
</style>
</head>
<body>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>
登录后复制

  b.dashed:虚线,在chrome/Firefox浏览器中,虚线和实线的比例是3:1(稀),在IE浏览器中,比例是2:1(密)

  c.dotted:点线,在chrome/Firefox浏览器中,是方点,在IE浏览器中,是圆点(可以利用圆点实现圆角效果)

  d.double:双线,计算规则,双线宽度永远相等,中间间隔+-1,例如,3px=1(内)+1(中间间隔)+1(外),可以实现三道杠图形。

  e.inset(内凹),outset(外凸),ridge(沟槽):风格过时,兼容性差,没有什么使用场景

3.border-color:在不指定color时,使用color作为边框色,可以利用这一特性,简化链接改变颜色时的css样式代码。例如:


<!DOCTYPE html><html><head>
    <title>鼠标移动时边框颜色的改变</title>
    <meta charset="utf-8">
    <style type="text/css">
        .a{
            width: 30px;
            height: 30px;
            padding: 20px;
            margin:30px;
            color: red;
            border:1px solid;
        }
        .a:hover{
            color: blue;/*            
            border:1px solid;*/        
        }
</style>
</head>
<body>
<p class="a">哈哈</p>
</body>
</html>
登录后复制

4.利用border可以实现背景图像的定位,因为背景图像在定位时是不计算border的

5.利用border实现等高布局,缺点是不支持百分比宽度

(4,5类似,都是利用border,使得与某侧距离固定)

以上是CSS深入理解之边框的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!