css3的属性
2016-04-09 本文已影响11人
你的言语我爱听却不懂
1 边框
1.1圆角 主要写法border-radius,如下图,举几个例子
屏幕快照 2016-04-09 下午7.17.00.png
未加边框的,下面是加上边框的效果
屏幕快照 2016-04-09 下午7.18.58.png
这个就是给div的4个角都加了圆角,也可以只给其中几个角加,可以写数值,也可以写百分比, 写法如下
"border-top-left"这是给左上角加圆角
"border-top-right"这是给右上角加圆角
"border-bottom-left"这是给左下角加圆角
"border-bottom-right"这是给右下角加圆角
注意如果要做一个椭圆,最好是写百分比,那样效果比较好.一般写法如下
"border-radius:100%;"椭圆的宽高是不一样的!!!
1.2阴影 主要写法box-shadow,如下图
屏幕快照 2016-04-09 下午7.35.54.png
box-shadow后面第一个值是x轴方向的偏移量,第二个是y轴方向的偏移量,第三个是模糊度 ,偏移量可以为负值,亦可以设置多个,中间用逗号隔开.
还有一个内阴影效果,写法是inset ,效果如下图
屏幕快照 2016-04-09 下午7.41.34.png
1.3文字阴影 主要写法是text-shadow,如下图
屏幕快照 2016-04-09 下午7.49.29.png
text-shadow后面接的值与box-shadow后面接的一样,但是没有内阴影
2背景
2.1背景裁剪 写法是background-clip,
clip裁剪一共有三个值
#border-box图片渲染在border里面
#padding-box图片渲染在padding里面
#content-box图片渲染在content里面
border-box举例如下图
屏幕快照 2016-04-09 下午8.04.12.png
padding-box举例如下图
屏幕快照 2016-04-09 下午8.09.07.png
content-box举例如下图
屏幕快照 2016-04-09 下午8.11.44.png
2.2背景图片的起始位置,写法是background-origin,
origin起点位置,一共有三个值
#border-box图片从border的位置开始,一直延伸,直到边框
#padding-box图片从padding的位置开始,一直延伸,直到边框
#content-box图片从content的位置开始,一直延伸,直到边框
border-box举例如下
屏幕快照 2016-04-09 下午8.24.07.png
padding-box举例如下
屏幕快照 2016-04-09 下午8.26.11.png
content-box举例如下
屏幕快照 2016-04-09 下午8.27.26.png
2.3背景图片的大小,写法background-size
几个特性
#lenght长度值指定,一般是直接写数值
#percentage百分比指定,一般是直接百分比
#auto真实大小,显示图片的真实大小
#cover等比例缩放到完全覆盖容器，背景图像有可能超出容
#contain将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
lenght举例如下图
屏幕快照 2016-04-09 下午8.47.44.png
percentage举例如下
屏幕快照 2016-04-09 下午8.49.47.png
auto举例如下
屏幕快照 2016-04-09 下午8.51.34.png
cover举例如下
屏幕快照 2016-04-09 下午8.53.08.png
注意cover和auto这两个是有点区别的
contain举例如下
屏幕快照 2016-04-09 下午8.56.11.png
