站长之家网站流量查询,怎么做网站赚钱,个人网站一键生成,动态ip做网站目录 一、前言二、伪元素选择器1、选择器2、注意事项3、代码示例 三、伪元素清除浮动1、第一种伪元素清除浮动2、第二种伪元素清除浮动 四、CSS3盒子模型1、box-sizing#xff1a;content-box2、box-sizing#xff1a;border-box 五、CSS3图片模糊处理1、图片变模糊①、CSS3滤… 目录 一、前言二、伪元素选择器1、选择器2、注意事项3、代码示例 三、伪元素清除浮动1、第一种伪元素清除浮动2、第二种伪元素清除浮动 四、CSS3盒子模型1、box-sizingcontent-box2、box-sizingborder-box 五、CSS3图片模糊处理1、图片变模糊①、CSS3滤镜filter②、语法③、实例实现 2、计算盒子宽度①、widthcalc函数②、语法③、实例实现(子盒子的宽度永远比父盒子小30px) 六、transition 过渡1、语法规范2、实例实现3、进度条案例实现①、实现以下内容②、代码示例 七、总结 一、前言 css3这个相信大家不陌生了是个非常有趣神奇的东西有了css3js都可以少写很多最近我也在过一遍css3的一些新特性不是全部是我在工作上常用的或者觉得有用的以及一些实例就写了这一篇总结希望这篇文章能帮到大家认识css3。 写这篇文章主要是让大家能了解css3的一些新特性以及基础的用法感觉css3的魅力如果想要用好css3这个得靠大家继续努力学习寻找一些讲得更深入的文章或者书籍了如果大家有什么其他特性推荐的欢迎补充大家一起学习进步 看这篇文章代码可以不用看得过于仔细这里主要是想让大家了解css3的新特性代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下让大家参考和调试。不要只看代码只看代码的话不会知道哪个代码有什么作用的建议边看效果边看代码。 二、伪元素选择器
1、选择器 伪元素选择器可以帮助我们利用CSS创建新标签元素而不需要HTML标签从而简化HTML结构 2、注意事项
before和after创建一个元素但是属于行内元素新创建的这个元素在文档树中是找不到的所以我们称为伪元素语法element::before{}before和after必须有content属性伪元素选择器和标签选择器一样权重为1
3、代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title伪元素选择器/titlestylediv{width: 200px;height: 200px;background-color: pink;}div::before{/* 这个content是必须要写的如果不写的话before无效 */content: 我;}div::after{/* 这个content是必须要写的如果不写的话after无效 */content: 你;}/style
/head
bodydiv喜欢/div
/body
/html如果想要使before和after的内容有高度和宽度的话则需要添加浮动属性或者使其变成行内块元素 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title伪元素选择器/titlestylediv{width: 200px;height: 200px;background-color: pink;}div::before{/* 这个content是必须要写的如果不写的话before无效 */content: 我;width: 46px;height: 40px;display: inline-block;background-color: blueviolet;}div::after{/* 这个content是必须要写的如果不写的话after无效 */content: 你;}/style
/head
bodydiv喜欢/div
/body
/html三、伪元素清除浮动
1、第一种伪元素清除浮动 2、第二种伪元素清除浮动 四、CSS3盒子模型 CSS3中可以通过box-sizing来指定盒模型有两个值即可指定为content-boxborder-box这样计算盒子大小的方式就发生了改变 1、box-sizingcontent-box box-siziongcontent-box盒子大小为widthpaddingborder以前默认的 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS3盒子模型/titlestylediv{width: 200px;height: 200px;background-color: bisque;border: 20px solid pink;padding: 15px;box-sizing: content-box;}/style
/head
bodydiv好好学习/div/body
/html2、box-sizingborder-box box-sizingborder-box盒子大小为width !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS3盒子模型/titlestylep{width: 200px;height: 200px;background-color: bisque;border: 20px solid pink;padding: 15px;box-sizing: border-box;}/style
/head
bodyp天天向上/p
/body
/html如果盒子模型改为了box-sizingborder-box那么padding和border就不会撑大盒子了前提padding和border不会超过width宽度 五、CSS3图片模糊处理
1、图片变模糊
①、CSS3滤镜filter filter CSS属性将模糊或颜色偏移等图形效果应用于元素 ②、语法
filter:函数()
例如filter:blur(5px); //blur模糊处理 数值越大越模糊③、实例实现
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图片模糊处理/titlestyleimg{width: 200px;height: 300px;/* blur是一个函数小括号里面数值越大图片越模糊注意数值要加px单位 */filter: blur(5px);}/* 当鼠标浮到图片上后图片变清晰 */img:hover{filter: blur(0px);}/style
/head
bodyimg src../02/image/圣诞树.jpg alt
/body2、计算盒子宽度
①、widthcalc函数 calc()此CSS函数在声明CSS属性值时执行一些计算括号里面可以使用 - * / 来进行计算 ②、语法
!-- 符号前后一定要用空格隔开否则无效 --
widthcalc(100% - 80px)③、实例实现(子盒子的宽度永远比父盒子小30px)
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS3宽度calc函数/titlestyle.father {width: 300px;height: 200px;background-color: purple;}.son {width: calc(100% - 30px);height: 200px;background-color: pink;}/style
/headbodydiv classfatherdiv classson/div/div
/body六、transition 过渡 过渡(transition)是CSS3中具有颠覆性的特征之一我们可以在不使用Flash动画或JavaScript的情况下当元素从一种样式变换成另一种样式时为元素添加效果过渡动画是从一个状态渐渐的过渡到另外一种状态目前经常和:hover一起搭配使用以下案例的实现如想要看过渡过程则需把代码运行至自己的浏览器中即可。 1、语法规范
transition:要过渡的属性 花费时间 运动曲线 何时开始;属性想要变化的css属性宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡写一个all就可以花费时间单位是秒必须写单位比如0.5s运动曲线默认是ease可以省略何时开始单位是秒必须写单位可以设置延迟触发时间默认是0s可以省略
2、实例实现
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title过渡效果/titlestylediv{width: 200px;height: 100px;background-color: bisque;/* 1.如果想要写多个属性利用逗号进行分割 *//* transition: width 0.5s ,height 0.5s ease-in-out 1s,background-color 0.5s ease-in 1s; *//* 2.如果想要多个属性都变化属性写all即可 */transition: all 0.5s;}div:hover{width: 400px;height: 200px;background-color: purple;}/style
/head
bodydiv/div
/body3、进度条案例实现
①、实现以下内容 ②、代码示例
headstyle.bar{width: 150px;height: 15px;border: 1px solid salmon;border-radius: 7px;padding: 1px;}.bar_in{width: 50%;height: 100%;background-color: salmon;transition: width 0.5s ;}.bar:hover .bar_in{width: 100%;}/style
/head
bodydiv classbardiv classbar_in/div/div
/body七、总结 好了个人总结的css3的新特性就到这里了其中有一些新特性如果想使用的好必须多去了解和练习。有些新特性如果要单独详细的讲比如动画过渡弹性盒子渐变等。估计可以写几篇或者十几篇文章特别是动画估计写一本书都可以 上面对css3新特性的讲解和案例都是基础的认识和用法希望能起到一个拓展思维的作用。最重要的是大家要多加练习实操是最重要的一环孰能生巧也是这样来的css3不仅要会用也要用好用好css3在项目的开发上很有帮助的 如果大家觉得我此博客还有哪些需要完善的地方欢迎在评论区指点~
