CSS解密笔记-Shape
时间：2023-03-30 15:12:16
CSS
AdaptiveEllipse(border-radius的用法)分别指定固定水平和垂直半径长度和宽度的元素，指定宽度和高度的一半即可变为椭圆，格式为两种值使用/分开。宽度：100px；高度：80px；边框半径：50px/40px；背景：橙色；效果如下：对于宽高不固定百分比值的元素，也可以通过指定百分比值实现自适应椭圆的效果。边界半径：50%/50%；也可以简写为border-radius:50%;###为每个角指定不同的值border-radius的扩展属性为：border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius也可以直接缩短:border-radius:[左上水平][右上水平][右下水平][左下水平]/[左上垂直][右上垂直][底部-right-vertical][bottom-left-vertical]当然每个值也可以省略，1~4都可以，CSS会用方法重复。使用此功能，您可以实现半个椭圆或四分之一椭圆的效果。边界半径：50%/100%100%00；边界半径：100%00100%/50%；边界半径：100%00；平行四边形变形，使用transform:skewX(-45deg)，可以得到一个平行四边形，但是元素中的字体也会变形，像这样：加标签，使用嵌套方案，不是很好的办法。选择伪元素的方式：.button{position:relative;}.button::before{内容：'';位置：绝对；顶部：0；底部：0；左：0；右：0；背景：橙色；变换：skewX（-45deg）；z-index:-1;}该方法适用于需要对元素进行变形但不对其内容进行变形的场景。把skew改成rotate，就变成了这样：实现border.inner-radius的圆角{position:relative;边界半径：20px；背景：白色；}.inner-radius::before{内容：'';位置：绝对；顶部：-10px；底部：-10px；左：-10px；右：-10px；背景：橙色；z-指数：-1；;}.borders::before{内容：'';位置：绝对；顶部：-10px；底部：-10px；左：-10px；右：-10px；边框：2px绿色虚线；z-指数：-1；}还有就是IE8下多背景的实现，为某层“背景”设置不透明度等属性。基于变形方案的菱形图片
.picture{width:300px;变换：旋转（45度）；overflow:hidden;}.picture>img{transform:rotate(-45deg)scale(1.42);}但这种方法需要额外的div，更适合方形图片。下面的方法适用于非正方形图像。基于裁剪路径方案/*直接在img元素上应用该属性，将图片裁剪成想要的形状，使用多边形函数polygon()指定一个菱形*/clip-path:polygon(50%0,100%50%,50%100%,050%);您还可以使用剪辑路径来参与过渡动画。（动画需要在同一个形函数，点都一样）。clip-img{clip-path:polygon(50%0,100%50%,50%100%,050%);过渡：1s剪辑路径；}.clip-img:hover{clip-path:polygon(00,100%0,100%100%,0100%);}这样，当鼠标悬停时，图像会扩展到原来的形状和大小.切角效果直切角背景：linear-gradient(45deg,transparent15px,orange0)leftbottom,linear-gradient(-45deg,transparent15px,orange0)rightbottom,linear-gradient(135deg,transparent15px,orange0)))左上，线性渐变（-135deg，透明15px，橙色0）右上；背景大小：50%50%；背景重复：不重复；注意，这个角度一度把我搞糊涂了，是：参考：张新旭-深入理解CSS3渐变倾斜线性渐变arccutcorner把线性渐变改成径向渐变，就变成了凹圆角。背景：径向渐变（左下圆，透明15px，橙色0）左下，径向渐变（右下圆，透明15px，橙色0）右下，径向渐变（左上圆，透明15px，orange0)lefttop,radial-gradient(circleatrighttop,transparent15px,orange0)righttop;background-size:50%50%;background-repeat:no-repeat;cuttingpathschemebackground:orange;剪辑-路径：多边形(20px0,calc(100%-20px)0,100%20px,100%calc(100%-20px),calc(100%-20px)100%,20px100%,0calc(100%-20像素),020像素);当padding不够宽时，此解决方案将截断文本。因为它正在切割整个元素。要了解有关剪辑路径多边形的更多信息，请单击此处。梯形标签利用3D变形，在x轴上旋转，形成梯形效果。为了避免标签中的字体也被扭曲，还使用了“平行四边形”实现（伪元素）。.tab{位置：相对；文本对齐：居中；line-height:30px;}.tab::before{position:absolute;内容：””;顶部：0；左：0；底部：0；右：0；变换原点：底部；/*与元素底边一起旋转，底边与原元素底部等长。（默认是绕中轴旋转，元素大小容易失控）*/transform:scaleY(1.3)perspective(.5em)rotateX(5deg);/*旋转后比原来的元素短，在Y轴方向拉伸到原来的长度。（尽量不要改变原元素，保证回滚后的效果）*/background-color:orange;z-index:-1;}这样很容易添加其他样式，例如在伪元素中添加如下样式：background-image:linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));border:1pxsolidrgba(0,0,0,.4);border-bottom:none;border-radius:.5em.5em00;框阴影：0.15em白色插图；它变成这样：
