css揭秘笔记——形状

dantezhao 发布于2019-08-29 13:47 / 3248人阅读

摘要：把改成，就变成了这样实现边框内圆角多重边框还有下实现多重背景为某一层背景多带带设置类似这样的属性等等。裁切路径方案这种方案，当内边距不够宽时，会裁切掉文本。

自适应的椭圆（border-radius的用法） 多带带指定水平和垂直半径

长宽固定的元素，可以通过指定宽高的一半，变为椭圆形，格式为两个值用/分开。

width: 100px; 
height: 80px; 
border-radius: 50px/40px;
background: orange;

效果如下：

百分比值

宽高不固定的元素，还可以通过指定百分比值来实现自适应椭圆的效果。

 border-radius: 50%/50%;

还可以简写为

border-radius: 50%;

### 为每个角指定不同的值

border-radius的展开属性为：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

也可以直接简写：
border-radius： [top-left-horizon] [top-right-horizon] [bottom-right-horizon] [bottom-left-horizon] / [top-left-vertical] [top-right-vertical] [bottom-right-vertical] [bottom-left-vertical]

当然，各个值也可以省略，1~4个均可，会以CSS常规方法重复。

利用这个特性，就可以实现半个椭圆或四分之一个椭圆的效果。

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

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

border-radius:100% 0 0;

平行四边形

形变，用transform: skewX(-45deg)，可以得到平行四边形，但是，元素中的字体也会跟着形变，就像这样：

添加一个标签，使用嵌套的方案，并不是很好的方法。

可以选择伪元素的方式：

.button{
    position: relative;
    
}
.button::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: orange;
    transform: skewX(-45deg);
    z-index: -1;
}

这种方法，可以应用在想变形一个元素而不想变形它的内容的场景。

把skew改成rotate，就变成了这样：

实现边框内圆角

.inner-radius{
    position: relative;
    border-radius: 20px;
    background: white;
}
.inner-radius::before{
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background: orange;
    z-index: -1;
}

多重边框

.borders{
    position: relative;
    border: 2px dashed orange;
}
.borders::before{
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    border: 2px dashed green;
    z-index: -1;
}

还有IE8下实现多重背景、为某一层“背景”多带带设置类似opacity这样的属性等等。

菱形图片 基于变形的方案


    


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

但是这种方法需要一个多余的div，并且对正方形的图片比较适用。下面的方法非常适应非正方形的图片。

基于裁切路径方案

/*直接在img元素上应用该属性，将图片裁切成想要的样子，用多边形函数polygon()指定一个菱形*/
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

还可以将clip-path参与到过渡动画。（动画需要在同一种形状函数，并且点相同）

.clip-img{
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 
    transition: 1s clip-path;
}
.clip-img:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

这样就有了鼠标悬停时，图片扩展为原来的形状和大小。

切角效果

直切角

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

注意，这个角度让我一度很困惑，它是这样的：

参考：张鑫旭-深入理解CSS3 gradient斜向线性渐变

弧形切角

把线性渐变改为径向渐变，就变成了内凹圆角。

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

裁切路径方案

background: orange;
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);

这种方案，当内边距不够宽时，会裁切掉文本。因为它是对整个元素进行裁切。

深入了解clip-path polygon，戳这里

梯形标签

使用3D形变，以x轴旋转，形成梯形的效果。为了避免标签中的字体也变形，还使用“平行四边形”实现方式（伪元素）。

.tab{
    position: relative;
    text-align: center;
    line-height: 30px;
}
.tab::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform-origin: bottom; /*以元素底边旋转，底边和原元素底部等长。（默认以中轴线旋转，元素大小容易不受控制）*/
    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: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;

就变成了这个样子：

服务器托管私有云大揭秘揭秘云存储云计算揭秘人工智能揭秘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112702.html

css揭秘笔记——视觉效果

摘要：实现染色效果的混合模式是，它会保留上层元素的高亮信息，并从它的下层吸取色相和饱和度信息。当我们只有一个背景图像及一个透明背景色时，就不会有任何混合效果。投影知识点 box-shadow: [inset]? 注意：在元素正下方的投影被裁切掉了，是没有的；而text-shadow不同，文字下方的投影不会被裁切。 box-shadow的第三个参数是模糊半径，假如设置4px...

skinner 2019-08-29 13:48 评论0 收藏0
《css揭秘》读书笔记

摘要：但是根据本司机两年的开发经验来看，在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧，我就不一一列举了，建议自读。很好很实用的一本书。第一章引言 css编码技巧在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性...

xiguadada 2019-08-29 16:28 评论0 收藏0
[CSS]《CSS揭秘》第三章——形状

摘要：自适应椭圆斜杠前为水平半径，后为垂直半径。和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。所以不要用或展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。和必须配合属性来使用，用来定义插入的内容，必须有值，至少是空。自适应椭圆 border-radius:50% / 50%;//斜杠前为水平半径，后为垂直半径。 background: #fb3; b...

ysl_unh 2019-08-30 15:53 评论0 收藏0
《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

摘要：本篇主要记录揭秘一书中后面几章的常用技巧。文字环绕的重点在于即文字围绕着路径来显示。本篇主要记录《CSS3揭秘》一书中后面几章的常用技巧。 1、伪元素换行先看下HTML代码，如下当爱的故事剩听说我找不到你单纯的面孔默认显示效果：一般情况下，我们喜欢直接在第一个span元素后面加个换行符，但是它对于语义来说并不友好,或者将第一...

longmon 2019-04-23 13:14 评论0 收藏0
《css 揭秘》读书笔记

摘要：因为鲜为人知的第四个长度参数双层投影毛玻璃效果见毛玻璃自定义复选框不多介绍，也有相关案例复选框滚动提示现在越来越多的移动端都是这样处理，滚动提示其他揭秘对应的地址图灵图书在封底都提供优惠码低价购买电子书她目标如何用 css 解决难题收获尽量减少代码重复 1 用相对值 font-size: 20px; line-height: 30px; // 应该改成 font-size:...

OnlyMyRailgun 2019-08-29 13:20 评论0 收藏0