2. 科技
  3. 【一起来烧脑】一步学会CSS3体系

【一起来烧脑】一步学会CSS3体系

it2022-05-05  114

[外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784aa1868fbb5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

CSS3 完全向后兼容

选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面

[外链图片转存失败(img-v3cEr47w-1563434266400)(https://upload-images.jianshu.io/upload_images/11158618-722281d083eec175.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-huN4JfPI-1563434266401)(https://upload-images.jianshu.io/upload_images/11158618-f7d4183236cb28f3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style> div { border:2px solid black; padding:10px 40px; background:pink; width:200px; border-radius:25px; } </style> </head> <body> <div>圆角边框</div> </body>

box-shadow属性被用来添加阴影

[外链图片转存失败(img-KgilfMkV-1563434266402)(https://upload-images.jianshu.io/upload_images/11158618-40ac51600b2d8472.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style> div { width:200px; height:100px; background-color:pink; box-shadow: 10px 10px 5px gray; } </style> </head> <body> <div>盒阴影</div> </body>

border-image 属性允许指定一个图片作为边框

<style> div { border:15px solid transparent; width:250px; padding:10px 20px; } #round { -webkit-border-image:url(img/border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(img/border.png) 30 30 round; /* Opera */ border-image:url(img/border.png) 30 30 round; } #stretch { -webkit-border-image:url(img/border.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(img/border.png) 30 30 stretch; /* Opera */ border-image:url(img/border.png) 30 30 stretch; } </style> </head> <body> <div id="round">图像平铺（重复）来填充该区域。</div> <br> <div id="stretch">图像被拉伸以填充该区域。</div> <p>这是我们使用的图片素材：</p> <img src="img/border.png" /> </body>

background-image属性添加背景图片 background-size指定背景图像的大小 background-origin属性指定了背景图像的位置区域

div { border:1px solid black; padding:35px; background-image:url(img/smile.png); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; }

CSS3 文本效果

text-shadow 可向文本应用阴影 [外链图片转存失败(img-owjA0klP-1563434266408)(https://upload-images.jianshu.io/upload_images/11158618-a6d32d00598d7bdc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style> h1 { text-shadow: 5px 5px 5px gray; } </style> </head> <body> <h1>文本阴影效果</h1>

word-wrap属性允许文本强制换行

<style> p.test { width:11em; border:1px solid #000000; word-wrap:break-word; } </style> </head>

[外链图片转存失败(img-pDsBONIz-1563434266410)(https://upload-images.jianshu.io/upload_images/11158618-dc8345016b343c2f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

CSS3 字体

@font-face规则

<style> @font-face { font-family: myFirstFont; src: url('.ttf'), url('.eot'); /* IE9+ */} div { font-family:myFirstFont; } </style>

CSS3 2D转换

2D转换方法translate()

left（x 轴） 和 top（y 轴）

div { transform: translate(50px,25px); -ms-transform: translate(50px,25px); /* IE 9 */ -webkit-transform: translate(50px,25px); /* Safari and Chrome */ -o-transform: translate(50px,25px); /* Opera */ -moz-transform: translate(50px,25px); /* Firefox */ }

[外链图片转存失败(img-fH8XYvEk-1563434266412)(https://upload-images.jianshu.io/upload_images/11158618-9a2906218577645c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

2D转换方法rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。

div { transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -o-transform: rotate(45deg); /* Opera */ -moz-transform: rotate(45deg); /* Firefox */ }

[外链图片转存失败(img-foai8Whk-1563434266413)(https://upload-images.jianshu.io/upload_images/11158618-022076c37057e6c8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

div { transform: scale(1.5,3); -ms-transform: scale(1.5,3); /* IE 9 */ -webkit-transform: scale(1.5,3); /* Safari 和 Chrome */ -o-transform: scale(1.5,3); /* Opera */ -moz-transform: scale(1.5,3); /* Firefox */ }

skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

div { transform: skew(15deg,30deg); -ms-transform: skew(15deg,30deg); /* IE 9 */ -webkit-transform: skew(15deg,30deg); /* Safari and Chrome */ -o-transform: skew(15deg,30deg); /* Opera */ -moz-transform: skew(15deg,30deg); /* Firefox */ }

matrix()方法和2D变换方法合并成一个。 matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }

CSS3 3D转换

3D转换方法rotateX()

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ }

3D转换方法rotateY()

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */ -moz-transform: rotateY(130deg); /* Firefox */ }

CSS3 过渡

div:hover{width:300px;} div { transition: width 1.5s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */}

CSS3 动画

@keyframes规则

多列

column-count属性规定元素应该被分隔成几列。

div { column-count:5; -moz-column-count:5; /* Firefox */ -webkit-column-count:5; /* Safari 和 Chrome */ }

column-gap属性规定列之间的间隔。

div { column-gap:40px; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chrome */ }

column-rule属性设置列之间的宽度、样式、颜色。

div { column-rule:5px outset pink; -moz-column-rule:5px outset pink; /* Firefox */ -webkit-column-rule:5px outset pink; /* Safari and Chrome */ }

[外链图片转存失败(img-PwFkBBSq-1563434266416)(https://upload-images.jianshu.io/upload_images/11158618-115dc7af4da98f1c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

CSS3 用户界面

div { resize:both; overflow:auto; }

box-sizing 属性允许以确定的方式定义适应某个区域的具体内容。

div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }

[外链图片转存失败(img-fJ0SiLPR-1563434266416)(https://upload-images.jianshu.io/upload_images/11158618-0e83a33f40f66a64.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<style> div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid pink; outline-offset:15px; } </style>

[外链图片转存失败(img-ymKLm6j0-1563434266417)(https://upload-images.jianshu.io/upload_images/11158618-e761775991035b94.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

[外链图片转存失败(img-PGGdTK96-1563434266417)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

程序员哆啦A梦 认证博客专家 博客专家 简书万粉优秀创作 掘金优秀作者 我是程序员哆啦A梦，蓝胖子，简书万粉优秀创作者，掘金优秀作者、博客专家，云+社区社区活跃作者，致力于打造一系列能够帮助程序员提高的优质文章。网站@http://www.dadaqianduan.cn

专利

最新回复(0)