css复习 background···

一、圆角 radius

border-radius:
数值:30px
半径大小
百分比:10%
x轴半径是元素宽度的百分比值
y轴半径是元素高度的百分比值
=>多值写法:
两个值:(左上右下)(右上左下)
(左上)(右上左下)(右下)
(左上) (右上)(右下)(左下)

=>单个值的写法:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

二、阴影 box-shadow

box-shadow:

  1. inset(可选)如果设置inset了,那么就会变成内阴影,默认是outset。
    2.x x轴偏移量
    3.y y轴偏移量
    4.阴影宽度
    5.扩展半径(可选参数) 阴影先从边框 开始进行扩展,然后从拓展结束位置开始渲染阴影,拓展的颜色是设置的阴影颜色
    6.阴影颜色

rgba:
颜色值
r = red(0-255)
g = green(0-255)
b = blue(0-255)
a = alpha(0-1)
/父级设置透明之后影响到了子级,也变成了透明的/
/
opacity: 0;/
/
使用rgba修改颜色不会改变子级的颜色*/
阴影不占位置
同一个元素可以拥有多层阴影,每层阴影之间用逗号隔开

三、背景图

1.background-origin 背景图原点 (初始位置计算)
padding-box
背景图像相对于内边距框来定位。
border-box
背景图像相对于边框盒来定位。
content-box
背景图像相对于内容框来定位。
注意:这条样式,仅仅是控制了背景图位置0,0点坐标在何处
2.background-clip 背景图裁切(显示部分)
属性值
border-box
背景被裁剪到边框盒。
padding-box
背景被裁剪到内边距框。
content-box
背景被裁剪到内容框。
注意:这条样式控制的是元素那些部分可以填充上背景图
-webkit-background-clip: text;可以根据文字裁切,如图:

3.background-size
length具体长度值
设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。
percentage百分比
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,是父级宽度的百分比,第二个值设置高度,是父级高度的百分比。 如果只设置一个值,则第二个值会被设置为 "auto"。
小例子:
显示固定个数的背景图片
cover
把背景图像拉伸或缩放至足够尺寸,以使背景图像完全覆盖背景区域。
contain
把背景图像拉伸或缩放至足够尺寸,以使其宽度和高度完全适应内容区域。

css3 提供的多背景图设置
写法:
多背景之间用逗号隔开
注意:
多背景图的覆盖问题

多值写法裁切和原点的先后顺序
原点在前
裁切在后

四、线性渐变

background: linear-gradient

参考http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,346评论 2 66
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,658评论 0 7
  • 临近放假时,我和爸妈说,我会去广州打工。 从小到大,这是我第一次一个人外出打工。 当我做出这个决定时,爸妈非常反对...
    LHLQ阅读 407评论 0 0