CSS样式

CSS的一些特殊的样式的实现

1. 内侧有圆角的方框

     li.a {
    background: tan;
    border-radius: 10px;
    box-shadow: 0 0 0 4px #655;
    outline: 10px solid #655;
     /*  outline并不会跟着元素的圆角走 但是box-shadow 会跟着元素的圆角走*/
    margin-left: 20px;
    margin-top: 20px;
   }
   

image.png

2.背景渐变

li.a {
   background: linear-gradient(red 30%, green 70%);
   //顶部和底部都占30%，中间占40%，如果把30%改为50%，那么则会两种颜色均分，不会有重叠的区域
}

image.png

image.png

image.png

3.垂直背景渐变

li.a {
 /*background: linear-gradient(to right, red 20%, green 0, green 80%, black 0);*/
 background: linear-gradient(90deg, red 20%, green 0, green 80%, black 0);
 background-size: 40px 100%;
}

image.png

4.斜向条纹

background: linear-gradient(45deg, red 25%, green 0, green 50%, red 0, red 75%, green 0);
 background-size: 40px 40px;
//或者，不用指定 background-size: 40px 40px;
background: repeating-linear-gradient(45deg, red, red 20px, green 0, green 40px);

image.png

4.网格

 background: linear-gradient(to right, rgba(30, 142, 255, 0.62) 50%, transparent 0),
 linear-gradient(rgba(255, 0, 0, 0.62) 50%, transparent 0);
 background-size: 40px 40px;
 border: 1px solid red;

image.png

  background: linear-gradient(to right, rgba(30, 142, 255, 0.62) 1px, transparent 0),
  linear-gradient(rgba(255, 0, 0, 0.62) 1px, transparent 0);
  background-size: 40px 40px;
  border: 1px solid red;

image.png

  background: linear-gradient(red 2px, transparent 0),
  linear-gradient(to right, red 2px, transparent 0),
  linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
  linear-gradient(to right, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
  border: 1px solid red;

image.png

5.波点

 background: radial-gradient(red 20%, green 80%);
 background-size: 40px 40px;
 border: 1px solid red;

image.png

 background-image: radial-gradient(red 20%, transparent 0), radial-gradient(green 20%, transparent 0);
 background-size: 40px 40px;
 border: 1px solid red;
 background-position: 0 0, 20px 20px;

image.png

5.棋盘

 background-image: linear-gradient(45deg, red 25%, transparent 0),
 linear-gradient(45deg, transparent 75%, red 0);
 background-size: 40px 40px;
 border: 1px solid red;

image.png

 background-image: linear-gradient(45deg, red 25%, transparent 0),
 linear-gradient(45deg, transparent 75%, red 0),
 linear-gradient(45deg, red 25%, transparent 0),
 linear-gradient(45deg, transparent 75%, red 0);
 background-size: 40px 40px;
 border: 1px solid red;
 background-position: 0 0, 20px 20px, 20px 20px, 40px 40px;
 //或者
 background-image: repeating-conic-gradient(red 0, red 25%, green 0, green 50%);
 background-size: 40px 40px;
 border: 1px solid red;
 background-position: 0 0, 20px 20px;

image.png

6.伪随机背景

 background-image: linear-gradient(red 11px, transparent 0),
 linear-gradient(green 23px, transparent 0),
 linear-gradient(blue 41px, transparent 0);
 background-size: 100% 41px, 100% 61px, 100% 83px;
 border: 1px solid red;

image.png

7.连续的图像边框

 background-image: linear-gradient(white, white),
 url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599196659261&di=b654973d57ea4cb4273d7be44d1fdb20&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg");
 background-size: cover;
 border: 1em solid transparent;
 background-clip: padding-box, border-box;
 background-origin: border-box;

image.png

 padding: 1em;
 background: linear-gradient(white, white) padding-box,
 repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0,
         transparent 25%, green 0, green 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
 border: 1em solid transparent;

image.png

@keyframes ants {
   to {
       background-position: 100%;
    }
 }
 border: 5px solid transparent;
 animation: ants 12s linear infinite;
 background: linear-gradient(white, white) padding-box,
 repeating-linear-gradient(-45deg, black 0, black 25%, white 0,
         white 50%) 0 / 0.6em 0.6em;

image.png

8.顶部边框裁剪的效果

 border-top: 1em solid transparent;
 padding-top: 1em;
 border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);

image.png

9.椭圆

 border-top: 1px solid red;
 border-radius: 50% /100% 100% 0 0;
 background: red; 

image.png

  border-top: 1px solid red;
  border-radius: 100% 0 0 100% / 50%;
  background: red;

image.png

  border-top: 1px solid red;
  border-radius: 100% 0 0 0;
  background: red;  

image.png

9.平行四边形

li.a {
   border-top: 1px solid red;
   position: relative;
   background: red;
   opacity: 0.5;
}

li.a:before {
   content: "";
   position: absolute;
   background: blue;
   opacity: 0.5;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -1;
   transform: skew(-45deg);
}

image.png

9.菱形

li.a {
   border-top: 1px solid red;
   background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599196659261&di=b654973d57ea4cb4273d7be44d1fdb20&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg");
   background-size: cover;
   clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
   transition: 1s clip-path;
}

li.a:hover {
   clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}

image.png

9.切角

li.a {
   border-top: 1px solid red;
   background: linear-gradient(45deg, transparent 15px, red 0);
}

image.png

li.a {
   border-top: 1px solid red;
   background: linear-gradient(-45deg, transparent 15px, red 0) right no-repeat,
   linear-gradient(45deg, transparent 15px, red 0) left no-repeat;
   background-size: 50% 100%;
}

image.png

li.a {
   border-top: 1px solid red;
   background: linear-gradient(135deg, transparent 15px, red 0) top left no-repeat,
   linear-gradient(-135deg, transparent 15px, red 0) top right no-repeat,
   linear-gradient(-45deg, transparent 15px, red 0) bottom right no-repeat,
   linear-gradient(45deg, transparent 15px, red 0) bottom left no-repeat;
   background-size: 50% 50%;
}

image.png

li.a {
   border-top: 1px solid red;
   background: radial-gradient(circle at top left, transparent 15px, red 0) top left no-repeat,
   radial-gradient(circle at top right, transparent 15px, red 0) top right no-repeat,
   radial-gradient(circle at bottom right, transparent 15px, red 0) bottom right no-repeat,
   radial-gradient(circle at bottom left, transparent 15px, red 0) bottom left no-repeat;
   background-size: 50% 50%;
}

image.png

li.a {
   border-top: 1px solid red;
   background: red;
   clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px,
   100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%,
   0 calc(100% - 20px), 0 20px);
}

image.png

10.梯形

li.a {
   position: relative;
   display: inline-block;
   padding: 0.5em 1em 0.35em;
   color: wheat;
}
li.a:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: #58a;
   z-index: -1;
   transform: scaleY(1.3) perspective(0.5em) rotateX(5deg);
   transform-origin: bottom;
}

image.png

li.a {
   position: relative;
   display: inline-block;
   padding: 0.3em 1em 0;
}
li.a:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -1;
   background-image: linear-gradient(hsla(0, 0%, 100%, 0.6),
   hsla(0, 0%, 100%, 0));
   border: 1px solid rgba(0, 0, 0, 0.4);
   border-bottom: none;
   border-radius: 0.5em 0.5em 0 0;
   box-shadow: 0 0.15em wheat inset;
   transform: perspective(0.5em) rotateX(5deg);
   transform-origin: bottom;
}

image.png

11.饼图

li.a {
   position: relative;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   overflow: hidden;
   background: conic-gradient(#665555 40%, red 0);
}

image.png

12.投影

li.a {
   width: 100px;
   height: 100px;
   background-color: aqua;
   box-shadow: 0 15px 7px -7px black;
}

image.png

li.a {
   width: 100px;
   height: 100px;
   background-color: aqua;
   box-shadow: 3px 3px 6px -3px black;
}

image.png

li.a {
   width: 100px;
   height: 100px;
   background-color: aqua;
   box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
}

image.png

12.滤镜

filter: sepia(1);
https://www.runoob.com/cssref/css3-pr-filter.html