CSS3
2017-01-11 00:00
281 查看
div>p:子代
div+p:div后面相邻的第一个p
div~p:div后面所有的兄弟p
1.属性选择器:
结构伪类选择器:
注意:所选到的元素的类型 必须是指定的类型E,否则选择无效
E:empty表示元素为空的类型
E:target:表示元素被激活的状态,要配合锚点使用
伪元素:
通过css模拟出html效果
伪元素选择器:
css3中新增两种颜色模式:
RGBA red green blue (0-255) alpha:透明度(0-1)
HSLA:
盒子模型:
私有化前缀:
边框:
背景:
可以有多个背景:多个背景按照正常的语法格式书写,每个背景使用逗号隔开
背景原点:
背景裁剪
渐变
div+p:div后面相邻的第一个p
div~p:div后面所有的兄弟p
1.属性选择器:
id选择器 # 通过id来选择 类名选择器 . 通过类名来选择 属性选择器 [] 通过标签属性来选择 语法: 标志性符号;[] ^:开头 $:结尾 *:包含 E[title]:选中页面的E元素,并且E需要带有title属性 E[title="abc"]:选中页面的E元素,并且E需要带有title属性,属性值为abc E[title^="abc"]:选中页面的E元素,并且E需要带有title属性,属性值以abc开头 E[title$="abc"]:选中页面的E元素,并且E需要带有title属性,属性值以abc结尾 E[title*="abc"]:选中页面的E元素,并且E需要带有title属性,属性值包含abc
结构伪类选择器:
E:first-child 选中父元素中的第一个子元素 E:last-child 选中父元素中的最后一个子元素 E:nth-child(n) 选中父元素中的第n+1个元素 n:0,1,2,3,4.。。。。。 偶数:2n even 奇数:2n-1 odd 前5个:-n+5 E:nth-last-child(3):从后向前选择,选中倒数第三个
注意:所选到的元素的类型 必须是指定的类型E,否则选择无效
E:empty表示元素为空的类型
E:target:表示元素被激活的状态,要配合锚点使用
伪元素:
通过css模拟出html效果
E::before E::after 必须带有content属性
伪元素选择器:
E::first-letter 选中第一个字母 E::first-line 选中第一行 E::selection 表示选择的区域 通过设置color background
css3中新增两种颜色模式:
RGBA red green blue (0-255) alpha:透明度(0-1)
HSLA:
H:色调 0-360 S:饱和度 0%-100% L:亮度 0%-100% A:alpha 透明度 0-1
盒子模型:
三个盒子:content-box padding-box border-box box-sizing:border-box(内减模式) content-box(外加模式)(默认值)
私有化前缀:
浏览器私有化前缀 -webkit-:谷歌,苹果 -moz- :火狐 -ms-:ie -o- :欧朋
边框:
边框圆角 border-radiu:30px; border-radius:30px 40px 50px 60px; 复制规律: 从左上开始,顺时针赋值,如果这个角度没有值,去对焦 border-radius:40px/60px; 边框阴影: box-shadow:水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 外/内阴影(inset) 边框图片: border-image-source:图片路径 border-image-slice:裁剪 border-image-width:边框宽度 border-image-repeat:边框宽度 repeat图片显示不完整 round:图片平铺 优化了 ,图片会完整显示 stretch:拉伸
背景:
背景可以改变大小,可以有多个背景 bakground-size:30px 30px; background-size:30% 30%; background-size:cover;覆盖 background=size:contain;包含
可以有多个背景:多个背景按照正常的语法格式书写,每个背景使用逗号隔开
背景原点:
background-origin: content-box padding-box border-box
背景裁剪
background-clip: content-box padding-box border-box
渐变
线性渐变: background-image:linear-gradient(方向,起始颜色,终止颜色) 方向; to left right bottom top 35deg
相关文章推荐
- 好看的CSS3多级下拉菜单(动画)
- 纯CSS3实现兔斯基简单害羞表情
- 手把手教你玩转css3 3D技术
- css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
- CSS3之background-clip
- HTML5/CSS3简易联系表单 扁平化风格
- CSS3 边框阴影
- css3动画之左右摇摆
- HTML5/CSS3跨平台开发技术分享(二)
- +【CSS3】使用纯css代码实现图片轮播效果
- CSS3中的rem值与px之间的换算
- CSS3选择器
- css3实现立方体,并且自转效果
- 使用CSS3实现百叶窗
- H5以及css3玩
- css3旋转
- 前端开发人员必须熟悉的10个CSS3属性
- 12款令程序员惊叹的CSS3效果库
- CSS3 3D transforms系列-3D旋转木马
- 如何在Swiper内制作CSS3动画效果