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

亦凉 2021-09-29 23:00 272阅读 0赞

\[外链图片转存失败(img-yfi1VPyy-1563434266398)([https://upload-images.jianshu.io/upload\_images/11158618-fc8784aa1868fbb5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][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][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][https_upload-images.jianshu.io_upload_images_11158618-f7d4183236cb28f3.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

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

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

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

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][https_upload-images.jianshu.io_upload_images_11158618-a6d32d00598d7bdc.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

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

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

## CSS3 字体 ##

@font-face规则

## 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][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][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][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][https_upload-images.jianshu.io_upload_images_11158618-0e83a33f40f66a64.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

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

--------------------

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

### 欢迎关注[达叔小生][Link 1]的简书！ ###

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

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

[https_upload-images.jianshu.io_upload_images_11158618-fc8784aa1868fbb5.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-fc8784aa1868fbb5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-722281d083eec175.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-722281d083eec175.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-f7d4183236cb28f3.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-f7d4183236cb28f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-40ac51600b2d8472.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-40ac51600b2d8472.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-a6d32d00598d7bdc.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-a6d32d00598d7bdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-dc8345016b343c2f.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-dc8345016b343c2f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-9a2906218577645c.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-9a2906218577645c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-022076c37057e6c8.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-022076c37057e6c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-115dc7af4da98f1c.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-115dc7af4da98f1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-0e83a33f40f66a64.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-0e83a33f40f66a64.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-e761775991035b94.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-e761775991035b94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[Link 1]: https://www.jianshu.com/u/c785ece603d1
[https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240