CSS3-边框属性

2017-11-21 本文已影响55人相关函数

CSS3中支持使用border-radius设置边框的圆角.

#myDIV{
      border: 1px solid #AAAAAA;
      width: 200px;
      height: 80px;
      /*
       * border-radius属性设置一个代表四个角的x,y都是该值
       * 两个代表 第一个代表左上和右下,第二右上和左下
       * 三个值代表 第一个左上 第二个代表两个角右上和左下 第三个则是右下
       * 四个代表四个角从左上顺时针
       */
      border-radius: 40px 40px 40px 40px/40px 40px 40px 40px; /*前四个是分别是左上,右上,右下,左下的x,后四个是这几个的y*/
}

设置边框图片

border-image 可以设置边框图片,有几个属性source为图片路径,slice如何裁剪默认以像素裁切,width定义边框图片显示的大小,repeat定义边框重复性:rounded平铺,stretched拉伸,repeated平铺.

边框的设置其实就是将图片按照九宫格的方式以设置的宽度裁剪,然后将对应位置的图片填充过去,然后按照repeat的设置图片的排列方式完成设置.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                border: 15px solid #A52A2A;
                width: 300px;
                height: 100px;
                text-align: center;
            }
            #round{
                border-image: url(../实战/timg.jpeg) 30 round;
            }
            #stretch{
                border-image: url(../css定位与div布局/images/4.jpg) 30 stretch;
            }
            
        </style>
    </head>
    <body>
        <div id="round">round</div>
        <div id="stretch">stretch</div>
    </body>
</html>

设置阴影

在CSS3中使用box-shadow给元素设置阴影

它主要有以下几个属性

h-shadow 水平方向上的阴影位置,可以为负值
v-shadow 垂直方向上阴影的位置,可以为负值
blur 可选值模糊距离
spread 可选阴影的大小
color 可选阴影的颜色

box-shadow: 10px 10px 5px 15px #aaaaaa

CSS3-边框属性

设置阴影

猜你喜欢

热点阅读