CSS魔法

╰半橙微兮° 2022-07-14 13:14 216阅读 0赞

趁着周五有空，将《css揭秘》这本书快速的阅读了一遍，下面将个人觉得有趣的CSS分享一下。

实例地址（分别对应着下面的例子）： [神奇的CSS][CSS]

半透明边框

background-clip属性的默认值是 `border-box`，表示背景被裁剪到边框盒。另外两个参数： `padding-box`，表示背景被裁剪到内边距框； `content-box`，表示背景被裁剪到内容框。

border: 10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box;

相关文章：[CSS3 Background][]

多重边框

（1）box-shadow方法

当一个正值的扩展半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”就像是一道实线边框，而且幸运的是，box-shadow支持逗号分隔语法，即可以创建任意数量的投影。

background: yellowgreen; box-shadow: 0 0 0 10px #655,             0 0 0 15px deeppink,             0 2px 5px 15px rgba(0,0,0,.6);

要注意的是：投影并不会影响布局，也可以说投影并不会占据真实的位置，而且投影不会响应鼠标事件。如果你要投影也可以响应事件，可以设置内阴影，就是box-shadow属性加上inset关键字，来产生内阴影，此时你还需要增加额外的内边距来放置内阴影。

（2）outline方法

当你只需两层边框时，可以选择先设置一层常规边框，再加上outline（描边）属性来产生外层的边框。

使用`outline`，不仅可以模拟实线边框，而且可以产生虚线边框。

background: yellowgreen; border: 10px solid #655; outline: 5px dashed deeppink; outline-offset: 10px;

outline-offset属性可以控制描边与元素边缘之间的间距，这个属性可以接受负值。

需要注意的是：这种方法并不能产生圆角

灵活的背景定位

background-position属性允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。

background: url(sample.jpg) no-repeat #58a; background-position: right 20px bottom 10px;

上面的代码将背景图片跟右边保持20px的偏移量，同时跟底边保持10px的偏移量。

条纹背景

先来理解渐变的规则，比如下面的例子：

linear-gradient(#000 20%, #fff #80);

这段代码中渐变是这样填充的，0~20%的区域被填充为\#000，80%到100%的区域被填充\#fff，而在20%~80%才是颜色真实渐变的区域（\#000~\#fff）

相关文章：[css3 Gradient渐变][css3 Gradient]

水平条纹

两种颜色：

background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px; 
     // 等价于 background: linear-gradient(#fb3 50%, #58a 0);
    background-size: 100% 30px;

理解这句话：如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

三种颜色：

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0); background-size: 100% 45px;

垂直条纹

background: linear-gradient(to right, #fb3 50%, #58a 0);  /* to right == 90deg */ background-size: 30px 100%;

斜向条纹

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0); background-size: 30px 30px;

不止45度

background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px)

repeating-linear-gradient()原理是这样的：

background: repeating-linear-gradient(60deg,             #fb3, #fb3 15px, #58a 15px, #58a 30px,             #fb3 30px, #fb3 45px, #58a 45px, #58a 60px,             #fb3 60px, #fb3 75px, #58a 75px, #58a 90px,....)

复杂的背景图案

方格桌布

background:white; background-image: linear-gradient(90deg,                   rgba(200,0,0,.5) 50%, transparent 0),                   linear-gradient(                    rgba(200,0,0,.5) 50%, transparent 0); background-size: 30px 30px;

background-image在设置多背景时，背景之间的层叠关系是：前面的背景会覆盖在后面的背景之上。

更多看这里：[http://lea.verou.me/css3patterns/][http_lea.verou.me_css3patterns]

自适应的椭圆形

border-radius属性其实可以这样设置的：

border-radius: 100px / 75px;

这是神马意思呢？其实这是单独设置水平和垂直半径，也是利用此属性，我们可以实现精确的椭圆：

border-radius: 50%;  ==> border-radius: 50% / 50%;

这样子设置的话，当元素高宽一致时，会呈现圆形；当高宽不一致时，就会呈现椭圆了。

半椭圆

border-radius: 50% / 100% 100% 0 0;  ==> border-radius: 50% 50% 50% 50% / 100% 100% 0 0;

有两点需要注意：

*  顺序：左上（border-top-left）、右上（border-top-right）、右下（border-bottom-right）、左下（border-bottom-left）  
    
 *  省略值时，如果提供3个值，则第4个值与第2个值相同；如果提供两个值，则第3个和第1个值相同。

四分之一椭圆

border-radius: 100% 0 0;

平行四边形

利用`skew()`扭曲来实现：

div{
        position: relative; } div::before{
         content: "";   position: absolute;   top:0;   right: 0;   bottom: 0;   left: 0;   z-index: -1;   background: #58a;   transform: skew(45deg); }

菱形

.picture{
         width: 400px;   transform: rotate(45deg);   overflow:hidden; } .picture > img{
         max-width: 100%;   transform: rotate(-45deg) scale(1.42); }

clip-path方式：

.picture img {
         -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

相关文章：[clip 和 clip-path][clip _ clip-path]

切角效果

background: linear-gradient(-45deg, transparent 15px, #58a 0);

多个切角

background: linear-gradient(135deg, transparent 15px, #58a 0) top left,            linear-gradient(-135deg, transparent 15px, #58a 0) top right,            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,            linear-gradient(45deg, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;

弧形切角

background:    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,   radial-gradient(circle at top right, transparent 15px, #58a 0) top right,   radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,   radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-size: 50% 50%;   background-repeat: no-repeat;

梯形标签页

.tab{
         position: relative;   padding: .5em 1em .35em;   color: white; } .tab::before {
         content: "";   position:absolute;   top: 0; right: 0; bottom: 0; left: 0;   z-index: -1;   background: #58a;   transform: perspective(.5em) rotateX(5deg);   transform-origin: bottom; }

试着将`transform-origin`属性设置为`bottom left`或`bottom right`看看。

单侧投影

box-shadow有第四个长度参数，表示模糊半径（扩张半径）。这个参数会根据你指定的值去扩展或（当指定负值时）缩小投影的尺寸。

box-shadow: 0 5px 4px -4px black;

上面的原理是：当扩张半径的值刚好与模糊半径相同时，我们是看不见投影的，除非使用了偏移量（第1个和第2个参数）。

双侧投影

box-shadow: 5px 0 5px -5px black,             -5px 0 5px -5px black;

不规则投影

filter: drop-shadow(2px 2px 10px rgba(255,255,255,.5));

染色效果

（1）基于滤镜

.filter > img {
         transition: .5s filter;   filter: sepia(1) saturate(4) hue-rotate(295deg); } .filter > img:hover{
         filter: none; }