不常用的css属性

1. background-origin:

    padding-box   背景图像填充框的相对位置
    border-box    背景图像边界框的相对位置
    content-box   背景图像的相对位置的内容框
div
{
	border:1px solid black;
	padding:35px;
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-position:left;
}
#div1
{
	background-origin:border-box;
}
#div2
{
	background-origin:content-box;
}

2. 水平渐变

background: linear-gradient(#fb3, #58a);
//距离顶部20%，80%的部分渐变
background: linear-gradient(#fb3 20%, #58a 80%); 
//三种颜色
background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 30px; //多个条纹背景

3. 水平条纹

//等高
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
//不等高
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
//三种颜色
background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

4. 垂直渐变

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

5. 斜向渐变

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

6. 重复渐变

background: repeating-linear-gradient(30deg,
#79b, #79b 15px, #58a 0, #58a 30px);

7. 椭圆

border-radius: 100px / 75px;

8. 自适应椭圆

宽度用于水平半径的解析，而高度用于垂直半径的解析

border-radius: 50% / 50%;

9. 半椭圆

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

10. 半椭圆

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

11. 四分之一椭圆

border-radius: 100% 0 0 0;

12. 平行四边形

transform: skewX(-45deg);


.button {
    position: relative;
    width: 50px;
    height: 50px;
    background: #006633;
    transform: translateX(25px);
}
.button::before {
    content: ''; /* 用伪元素来生成一个矩形 */
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   z-index: -1;
   background: #58a;
   transform: skew(-45deg);
}

13. 切角效果

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

14. 四个切角

background: #58a;
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;

15. 弧形切脚

background: #58a;
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;

16. 梯形

transform: perspective(.5em) rotateX(5deg);

.tab {
position: relative;
display: inline-block;
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);
}

17. 简单饼型

width: 100px;
height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image:linear-gradient(to right, transparent 50%, #655 0);

18. 视觉效果 单侧投影

box-shadow: 2px 3px 4px rgba(0,0,0,.5);

19. 折角效果

background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 2em 2em,
linear-gradient(-135deg,
transparent 1.5em, #58a 0);


background: #58a; /* 回退样式 */
background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 3em 1.73em,
linear-gradient(-150deg,
transparent 1.5em, #58a 0);

20. 三角形

.d2{
     width: 0; 
     height: 0;
     border-width: 100px;
     border-style: solid;
     border-color:#FFCCCC #0099CC #996699 #339933;
}

21.

18.

18.