CSS3 边框

今天主要学习CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下 border:1px solid red了..那么CSS3中会给我们带来什么惊喜呢?

在CSS3中.边框多了4种新特性

 Border-color(设置边框颜色)

 Border-image(通过图片设置为边框)

 Border-radius(边框的半径)

 box-shadow(阴影效果)

用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序


CSS3圆角border-radius属性

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    div
    {
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:yellow;
    width:300px;
    height:300px;
    border-radius:25px 15px 40px 0;
    }
</style>
</head>
    <body>
    <div>观察4个角的不同 </div>
    </body>    
</html>

CSS3盒阴影box-shadow属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
 <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-box-shadow:5px 2px 6px black;
            -ms-box-shadow:5px 2px 6px black;
            -wekit-box-shadow:5px 2px 6px black;
            -o-box-shadow:5px 2px 6px black;
            box-shadow:5px 2px 6px black;
        }
  </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-shadow样式</div>
</body>
</html>

CSS3边界图片Border-image

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
  <style type="text/css"> 
        .border_test
        {
            -webkit-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -moz-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -o-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -ms-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            display: block;
            
            border-width: 0 12px;
            padding: 10px;
            text-align: center;
            font-size: 26px;
            text-decoration: inherit;
            color:white;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-image样式</div>
</body>
</html>





继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div { border:2px solid #a1a1a1; padding:10px 40px; background:yellow; width:300px; height:300px; border-radius:25px 55px 40px 0; } </style> </head> <body> <div>观察4个角的不同 </div> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载