CSS3新特性
CSS3新特性
CSS3是最新的CSS标准，旨在扩展CSS2.1。
圆角
通过border-radius属性可以给任何元素制作圆角。
border-radius: 所有四个边角border-*-*-radius属性的缩写。border-top-left-radius: 定义了左上角的弧度。border-top-right-radius: 定义了右上角的弧度。border-bottom-right-radius: 定义了右下角的弧度。border-bottom-left-radius: 定义了左下角的弧度。
<div id="t1"></div>
<style type="text/css">
#t1{
height: 100px;
width: 100px;
background-color: blue;
border-radius: 10px;
}
</style>
盒阴影
box-shadow: h-shadow v-shadow blur spread color inset
h-shadow: 必需，水平阴影的位置，允许负值。v-shadow: 必需，垂直阴影的位置，允许负值。blur: 可选，模糊距离。spread: 可选，阴影的大小。color: 可选，阴影的颜色。在CSS颜色值寻找颜色值的完整列表。inset: 可选，从外层的阴影改变阴影内侧阴影。
<div id="t2"></div>
<style type="text/css">
#t2{
height: 100px;
width: 100px;
border: 1px solid #eee;
box-shadow: 5px 5px 5px #aaa;
}
</style>
背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
background-image: 规定背景图片路径。background-clip: 规定背景的绘制区域。background-origin: 规定背景图片的定位区域。background-size: 规定背景图片的尺寸。
<div id="t3"></div>
<style type="text/css">
#t3{
height: 100px;
width: 100px;
border: 1px solid #eee;
background-image: url(https://blog.touchczy.top/favicon.ico);
background-size:30px 30px;
background-repeat:repeat;
background-origin:content-box;
}
</style>
渐变
CSS3渐变可以在两个或多个指定的颜色之间显示平稳的过渡。
Linear Gradients: 线性渐变，向下/向上/向左/向右/对角方向。Radial Gradients: 径向渐变，由中心定义。
<div id="t4"></div>
<style type="text/css">
#t4{
height: 100px;
width: 100px;
border: 1px solid #eee;
background-image: linear-gradient(to right, red , yellow);
}
</style>
文本效果
CSS3对文本进行了更多的支持。
hanging-punctuation: 规定标点字符是否位于线框之外。punctuation-trim: 规定是否对标点字符进行修剪。text-align-last: 设置如何对齐最后一行或紧挨着强制换行符之前的行。text-emphasis: 向元素的文本应用重点标记以及重点标记的前景色。text-justify: 规定当text-align设置为justify时所使用的对齐方法。text-outline: 规定文本的轮廓。text-overflow: 规定当文本溢出包含元素时发生的事情。text-shadow: 向文本添加阴影。text-wrap: 规定文本的换行规则。word-break: 规定非中日韩文本的换行规则。word-wrap: 允许对长的不可分割的单词进行分割并换行到下一行。
<div id="t5">Text</div>
<style type="text/css">
#t5{
height: 100px;
width: 100px;
border: 1px solid #eee;
color: #fff;
text-shadow: -1px 3px 5px #333;
}
</style>
字体
CSS3可以使用@font-face规则加载所需字体。
font-family: 必需，规定字体的名称。src: 必需，定义字体文件的URL。font-stretch: 可选，定义如何拉伸字体，默认是normal。font-style: 可选，定义字体的样式，默认是normal。font-weight: 可选，定义字体的粗细，默认是normal。unicode-range: 可选，定义字体支持的UNICODE字符范围，默认是U+0-10FFFF。
<div id="t6">Text</div>
<style type="text/css">
@font-face{
font-family: ff;
src: url(https://cdn.jsdelivr.net/gh/WindrunnerMax/Yolov3-Train@2d965d2/keras-yolo3/font/FiraMono-Medium.otf);
}
#t6{
height: 100px;
width: 100px;
border: 1px solid #eee;
font-family:ff;
}
</style>
2D转换
CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。
transform: 适用于2D或3D转换的元素。transform-origin: 允许更改转化元素位置。
<div id="t7"></div>
<style type="text/css">
#t7{
height: 100px;
width: 100px;
border: 1px solid #eee;
transform:rotate(10deg);
}
</style>
3D转换
CSS3可以使用3D转换来对元素进行格式化。
transform: 向元素应用2D或3D转换。transform-origin: 允许你改变被转换元素的位置。transform-style: 规定被嵌套元素如何在3D空间中显示。perspective: 规定3D元素的透视效果。perspective-origin: 规定3D元素的底部位置。backface-visibility: 定义元素在不面对屏幕时是否可见。
<div id="t8"></div>
<style type="text/css">
#t8{
height: 100px;
width: 100px;
border: 1px solid #eee;
transform:rotateX(10deg);
}
</style>
动画
CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。
@keyframes: 规定动画。animation: 所有动画属性的简写属性，除了animation-play-state属性。animation-name: 规定@keyframes动画的名称。animation-duration: 规定动画完成一个周期所花费的秒或毫秒，默认是0。animation-timing-function: 规定动画的速度曲线，默认是ease。animation-fill-mode: 规定当动画不播放时，例如当动画完成时，或当动画有一个延迟未开始播放时，要应用到元素的样式。animation-delay: 规定动画何时开始，默认是0。animation-iteration-count: 规定动画被播放的次数，默认是1。animation-direction: 规定动画是否在下一周期逆向地播放，默认是normal。animation-play-state: 规定动画是否正在运行或暂停，默认是running。
<div id="t9"></div>
<style type="text/css">
@keyframes animation{
from {background:red;}
to {background:yellow;}
}
#t9{
height: 100px;
width: 100px;
border: 1px solid #eee;
animation:animation 5s ease infinite alternate;
}
</style>
过渡
CSS3中可以使元素从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
transition: 简写属性，用于在一个属性中设置四个过渡属性。transition-property: 规定应用过渡的CSS属性的名称。transition-duration: 定义过渡效果花费的时间，默认是 0。transition-timing-function: 规定过渡效果的时间曲线，默认是ease。transition-delay: 规定过渡效果何时开始，默认是 0。
<div id="t10"></div>
<style type="text/css">
#t10{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: red;
transition: all .5s;
}
#t10:hover{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: yellow;
transition: all .5s;
}
</style>
Flex布局
通过指定display: flex来标识一个弹性布局盒子，称为FLEX容器，容器内部的盒子就成为FLEX容器的成员，容器默认两根轴线，水平的主轴与垂直的交叉轴，主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end，容器成员默认按照主轴排列。
https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/Flex布局.md
Grid布局
通过指定display: grid;指定容器使用Grid布局，Grid布局中采用网格布局的区域，称为容器，容器内部采用网格定位的子元素，称为成员。容器中水平区域称为行，垂直区域称为列，可以将其看作二位数组。划分网格的线就称为网格线，正常情况下n行有n + 1根水平网格线，m列有m + 1根垂直网格线。注意当容器设置为Grid布局以后，容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/Grid布局.md
多列布局
CSS3可以将文本内容设计成像报纸一样的多列布局。
column-count: 指定元素应该被分割的列数。column-fill: 指定如何填充列。column-gap: 指定列与列之间的间隙。column-rule: 所有column-rule-*属性的简写。column-rule-color: 指定两列间边框的颜色。column-rule-style: 指定两列间边框的样式。column-rule-width: 指定两列间边框的厚度。column-span: 指定元素要跨越多少列。column-width: 指定列的宽度。columns: 设置column-width和column-count的简写。
<div id="t11">多列布局示例</div>
<style type="text/css">
#t11{
height: 100px;
width: 100px;
border: 1px solid #eee;
column-count: 3;
column-gap: 20px;
}
</style>
用户界面
CSS3中增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
appearance: 允许使一个元素的外观像一个标准的用户界面元素。box-sizing: 允许以适应区域而用某种方式定义某些元素。icon: 为创作者提供了将元素设置为图标等价物的能力。nav-down: 指定在何处使用箭头向下导航键时进行导航。nav-index: 指定一个元素的Tab的顺序。nav-left: 指定在何处使用左侧的箭头导航键进行导航。nav-right: 指定在何处使用右侧的箭头导航键进行导航。nav-up: 指定在何处使用箭头向上导航键时进行导航。outline-offset: 外轮廓修饰并绘制超出边框的边缘。resize: 指定一个元素是否是由用户调整大小。
<div id="t12"></div>
<style type="text/css">
#t12{
height: 100px;
width: 100px;
border: 1px solid #eee;
resize:both;
overflow:auto;
}
</style>
滤镜
CSS3的filter属性可支持对于网页进行各种滤镜效果。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<div id="t13"></div>
<style type="text/css">
#t13{
height: 100px;
width: 100px;
border: 1px solid #eee;
filter: blur(3px);
background-color: blue;
}
</style>
选择器
element1~element2: 选择同级前面有element1元素的全部element2元素[attribute^=value]: 选择attribute属性中以value开头的元素[attribute$=value]: 选择attribute属性中以value结尾的元素[attribute*=value]: 选择attribute属性中包含value字符串的元素div:first-child: 选择属于其父元素的第一个子元素的每个div元素div:last-child: 选择属于其父元素最后一个子元素的每个div元素div:nth-child(n): 选择属于其父元素的第n个子元素的每个div元素div:nth-last-child(n): 同上，从这个元素的最后一个子元素开始算div:nth-of-type(n): 选择属于其父元素第n个div元素的每个div元素div:nth-last-of-type(n): 同上，但是从最后一个子元素开始计数div:first-of-type: 选择属于其父元素的首个div元素的每个div元素div:last-of-type: 选择属于其父元素的最后div元素的每个div元素div:only-child: 选择属于其父元素的唯一子元素的每个div元素div:only-of-type: 选择属于其父元素唯一的div元素的每个div元素:root: 选择文档的根元素:empty: 选择的元素里面没有任何内容:checked: 匹配被选中的input元素，这个input元素包括radio和checkbox:default: 匹配默认选中的元素，例如：提交按钮总是表单的默认按钮:disabled: 匹配禁用的表单元素:enabled: 匹配没有设置disabled属性的表单元素:valid: 匹配条件验证正确的表单元素
媒体查询
可以针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。
<div id="t14"></div>
<style type="text/css">
@media screen and (min-width:600px){
#t14{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: red;
transition: all .5s;
}
}
@media screen and (max-width:600px) {
#t14{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: yellow;
transition: all .5s;
}
}
</style>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>CSS3新特性</title>
<style type="text/css">
div{
margin: 10px 0;
height: 100px;
width: 100px;
border: 1px solid #eee;
}
#t1{
border-radius: 10px;
background-color: blue;
}
#t2{
box-shadow: 5px 5px 5px #aaa;
}
#t3{
border: 1px solid #eee;
background-image: url(https://blog.touchczy.top/favicon.ico);
background-size:30px 30px;
background-repeat:repeat;
background-origin:content-box;
}
#t4{
background-image: linear-gradient(to right, red , yellow);
}
#t5{
color: #fff;
text-shadow: -1px 3px 5px #333;
}
@font-face{
font-family: ff;
src: url(https://cdn.jsdelivr.net/gh/WindrunnerMax/Yolov3-Train@2d965d2/keras-yolo3/font/FiraMono-Medium.otf);
}
#t6{
font-family:ff;
}
#t7{
transform:rotate(10deg);
}
#t8{
transform:rotateX(10deg);
}
@keyframes animation{
from {background:red;}
to {background:yellow;}
}
#t9{
animation:animation 5s ease infinite alternate;
}
#t10{
background: red;
transition: all .5s;
}
#t10:hover{
background: yellow;
transition: all .5s;
}
#t11{
column-count: 3;
column-gap: 20px;
}
#t12{
resize:both;
overflow:auto;
}
#t13{
filter: blur(3px);
background-color: blue;
}
@media screen and (min-width:600px){
#t14{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: red;
transition: all .5s;
}
}
@media screen and (max-width:600px) {
#t14{
height: 100px;
width: 100px;
border: 1px solid #eee;
background: yellow;
transition: all .5s;
}
}
</style>
</head>
<body>
<div id="t1">圆角</div>
<div id="t2">盒阴影</div>
<div id="t3">背景</div>
<div id="t4">渐变</div>
<div id="t5">文本效果</div>
<div id="t6">FONT</div>
<div id="t7">2D转换</div>
<div id="t8">3D转换</div>
<div id="t9">动画</div>
<div id="t10">过渡</div>
<div id="t11">多列布局示例</div>
<div id="t12">用户界面</div>
<div id="t13">滤镜</div>
<div id="t14">媒体查询</div>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/f988d438ee17
https://www.runoob.com/css3/css3-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Archive/CSS3
浙公网安备 33010602011771号