资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/css3

css3

RancherLabs / 993人阅读

css3新增选择器

属性选择器 包括h5中新增的自定义属性



     
sasas

属性选择器可以指定属性值 的样式变化
E[attr="value"] 指定属性名



     
sasas1

     
sasas2

     
sasas3

只有第一行才会变为红色
E[attr~="value"] 属性对应的值是许多个值 其中包括这个value
E[attr^="value"] 属性对应的值是以value开头的 一个值
E[attr$="value"] 属性对应的值是以value结束的 一个值
E[attr*="value"] 属性对应的值中包含value字符串包含字母 一个值
E[attr|="value"] 属性值是以 value- 开始的
结构选择器
p:nth-child(1|odd（2n）|even(2n-1)) 作为第一个孩子的p会被选择到
p:nth-last-child(1|odd（2n）|even(2n-1)) 作为倒数第几个孩子的p节点
p:nth-of-type(1|odd（2n）|even(2n-1)) 找到父级下的第二个p标签
p:nth-last-of-type(1|odd（2n）|even(2n-1)) 找到父级下的倒数第二个p标签
p:first-child ==p:nth-child(1)
p:last-child ==p:nth-last-child(1)
P:first-of-type==p:nth-of-type(1)
p:empty 表示元素中没有子节点
p:only-of-type 表示p的父元素中只有一个子节点 且这个唯一的子节点的必须是p
p:only-child 表示p的父元素中只有一个子节点 且这个唯一的子节点的必须是p

css3中新增加的伪类
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
url#value
div:target 会选择到id为target的div
表单新增的伪类
input:disabled{} 会选择到不能编辑的输入框
input:enabled{} 会选择到能编辑的输入框
input:checked{} 会选择到当前选中的复选框
css3新增的兄弟选择器
E~F 选择到的是E元素后边的所有兄弟节点
E+F 选择到的是E后边的第一个兄弟节点
实现模拟单选框

文本新增选择器
p:first-line 选择到文本的第一行
p:first-letter 选择到文本的第一个文字
p::selection 文本被鼠标选中的时候的样式 注意到时双冒号

    p::selection{
      color: red;background: green;
    }


   

       的囧事就打死的大世界第三

p:after {content:"添加的内容" 样式}
E:not(F) 选择到不是F的E
h1:not(.h2) 选择到类不是h2的h2标签

文本新增属性

1、rgba颜色模式 红绿蓝透明度(0-1) 背景透明 文字不会透明
2、文字阴影 text-shadow: 0 0 10px red; / x y 模糊程度 阴影颜色/
text-shadow: 第一组阴影,第二组阴影;
3、文字描边 webkit内核浏览器才会支持
-webkit-text-stroke:3px宽度

css3新增盒模型

父元素属性 ：
1、display: -webkit-box;
2、内部项目的布局方向 -webkit-box-orient: vertical; 默认是横向显示的
3、内部项目的元素排列 -webkit-box-direction: reverse; 实现元素颠倒
4、水平方向上对项目没有占满的富裕空间的管理 -webkit-box-pack: end 富裕空间在左侧显示
这就可以轻松的实现水平居中了：-webkit-box-pack: center
把富裕空间清军分配给每一个元素：-webkit-box-pack: justify
5、垂直方向上对项目没有占满的富裕空间的管理 -webkit-box-align:center ;
这就可以轻松的实现垂直居中了：-webkit-box-align: center
内部项目的属性：
1、希望元素显示的位置：-webkit-box-ordinal-group：2
希望他显示在第几个

.box div:nth-of-type(1){
        -webkit-box-ordinal-group: 2;
    }

2、弹性空间管理
-webkit-box-flex:1 -webkit-box-flex:5
假设有两个元素 第一个占1/3的父元素的宽度 第二个占2/3的父元素的宽度

css3对盒模型的阴影

box-shadow: 10px 10px 30px blue; //x偏移 y偏移 模糊程度 阴影颜色
box-shadow: inset 10px 10px 30px blue; //投影方式 x偏移 y偏移 模糊程度 阴影颜色
做边框的一个新方法 利用阴影来做 同时阴影可以叠加 一个box上边可以增加多个阴影

css3盒模型的倒影

-webkit-box-reflect: below|left|right|top 倒影和元素之间的距离
css3渐变

background: -webkit-linear-gradient(red 0,blue 100%);
红色在开始 蓝色在结束 的一个渐变

css3的拖拽放大属性

但是这个属性必须结合overflow: auto;来实现拖拽放大

css3中盒模型的解析方式

box-sizing:content-box 标准盒模型 默认的
内容宽度=width
可视宽度=width+padding+border
box-sizing:border-box 怪异盒模型
可视宽度=原来的width 所以如果他有padding 此时再设置这个属性 就会导致子元素就会被减小

css3布局相关的东西

分栏布局 针对许多文字 一定要加上webkit前缀
-webkit-column-width: 250px; 每一栏有多宽
-webkit-column-count: 4; 告诉浏览器有多少栏 浏览器自动算每一栏有多宽
-webkit-column-gap:10px 栏目之间多少px
-webkit-column-rule:1px solid red 栏目的分割线的样式

css3实现响应式 IE6 7 8 不兼容


当设备的宽度在800px以上来引用的

当设备的宽度在400到800之间 来引用的

当设备的宽度在400以下的时候 来引用的



设备竖屏的情况下会加载这个css

设备横屏的情况下会加载这个css

css3新增UI样式-border-radius

border-radius:10px;
两个值：左上 右上 左下 右下
三个值：左上 右上左下 右下
实现画椭圆 border-radius: 100px/150px; x轴的半径/y轴的半径
css3新增UI样式 border-image:url

第一个参数 url 使用的图片
第二个参数 切割图片 对背景的切割 上下 左右 再分配到边框（固定的宽度）上做背景 不加px
第三个参数 图片的排列方式 round stretch

线性渐变

背景和 div的边框图片的属性值 都可以是线性渐变
-webkit-linear-gradient(起点 终点 起点的颜色 终点的颜色)
-webkit-linear-gradient(角度 起点的颜色 第二个新起点的颜色) 逆时针旋转的角度 默认是从左向右
-webkit-linear-gradient(角度 起点的颜色 起点的位置 终点的颜色 终点的位置)
改变某个位置的颜色 直接再在这个位置上写一个颜色
实现鼠标放上去 进度条滚动的效果



    
sasa

使用 background 的时候 设置多个背景的时候 先设置的在上边 后设置的在下边

径向渐变

起点的位置 left top ,right top ,100px 100px 表示的是圆心的位置
参数2 圆的半径
参数3 形状的设置

背景尺寸 background-size: 宽 高 


    
sasa

属性值的关键字
cover 用背景图片（等比放大）铺满 可能导致图片的宽或者高消失一部分
container 将图片（等比缩小）从而放在div 里边 但是可能会会出现 背景没有覆盖到的地方

背景图的原点设置 background-origin :属性值

padding-box 默认的属性值 原点就是padding的左上角
border-box 原点就是div的边框的左上角
content 原点就是div的内容的左上角

背景图的裁切 background-clip:属性值

border-box 默认值 会从边框部分开始显示北京图片
padding-box 从padding区开始显示背景区
content-box 从内容区开始显示背景区

css-font-face

自定义字体 使用方法

@font-face    //关键字  
{
font-family: myFirstFont;            //定义的字体的名字  
src: url("Sansation_Light.ttf"),     //定义字体的来源 
     url("Sansation_Light.eot"); /* IE9 */     //兼容IE9
}

这样就可以使用网上现在有的字体库 从而是实现新的定义的字体

服务器托管 超融合服务器 css3 css3气泡 css3动画 JS+CSS3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112622.html

相关文章

  • 9个助力CSS开发的网站

    摘要：是对规范的一个很大的改善和增强，它使得开发人员可以很容易的在网站中加入时尚的效果。一款在线圆角工具，四个角输入值就能生成对应的效果和代码。一个非常有用的用于和特性检测的库一个非常不错的兼容性在线检测网站。 CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。本文收集了9款有用的开发工具推荐给大家。 CSS3 Pie sho...

    legendmohe 评论0 收藏0

  • CSS重塑计划（一）：选择符

    摘要：重塑计划一选择符元素选择符通配选择符，选择所有元素对象。选择符，以唯一标识符属性等于的对象作为选择符。选择具有属性且属性值为包含的字符串的元素。伪类选择符设置超链接在未被访问前的样式。仅用于规则匹配不含有选择符的元素。 CSS重塑计划（一）：选择符 元素选择符 *通配选择符(Universal Selector)，选择所有元素对象。E类型选择符(Type Selector)，以文档语言...

    lx1036 评论0 收藏0

  • 前端面试题-渐进增强和优雅降级

    摘要：一背景介绍渐进增强和优雅降级这两个概念是在出现之后火起来的。二概念理解渐进增强渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果交互追加功能达到更好的体验。 一、背景介绍 渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器...

    HollisChuang 评论0 收藏0

  • 杂谈：渐进增强与优雅降级

    摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。 作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

    hiyang 评论0 收藏0

  • 杂谈：渐进增强与优雅降级

    摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。 作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

    王军 评论0 收藏0

  • 杂谈：渐进增强与优雅降级

    摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。 作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

    SimonMa 评论0 收藏0

发表评论

登陆后可评论

0条评论

RancherLabs

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<