在页面构建中,能明显提升页面显示质量的一些 一、边框内圆角我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现。 #wrapper { width: 200px; height: 80px; padding: 10px; background: rgb(255, 187, 51); #content { display: flex; justify-content: center; align-items: center; height: 100%; background: rgb(85, 136, 187); color: #fff; font-size: 14px; border-radius: 20px; }} 这种解决方案需要使用到两个 这里需要用到
这里我们将使用第四个属性
这种实现方式,对于边框的宽度和圆角的大小有一定的限制效果。仅当边框宽度 二、条纹背景如何使用CSS来实现条纹? 使用 #stripe { width: 400px; height: 200px; background: linear-gradient(rgb(255, 187, 51), rgb(85, 136, 187));} 尝试修改
因为条纹是由 background-size: 100% 40px; 如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小,则该色标的位置值会被设置为它前面所有色标位置值的最大值。
然后我们尝试创建一个三色条纹以及垂直条纹 background: linear-gradient( rgb(255, 187, 51) 33.3%, rgb(85, 136, 187) 0, rgb(85, 136, 187) 66.6%, rgb(170, 255, 0) 0); 垂直条纹
默认值为 斜条纹 background: linear-gradient(45deg, rgb(255, 187, 51) 25%, rgb(85, 136, 187) 0, rgb(85, 136, 187) 50%, rgb(255, 187, 51) 0%, rgb(255, 187, 51) 75%, rgb(85, 136, 187) 0);background-size: 30px 30px; 为了达到斜条纹等宽的视觉效果,需要运用到勾股定理来计算宽度。
介绍 可以试着使用 background: linear-gradient(60deg, rgb(255, 187, 51), rgb(255, 187, 51) 25%, rgb(85, 136, 187) 0, rgb(85, 136, 187) 50%, rgb(255, 187, 51) 0, rgb(255, 187, 51) 75%, rgb(85, 136, 187) 0, rgb(85, 136, 187) 100%);background-size: 18px 31px;background: repeating-linear-gradient(60deg, rgb(255, 187, 51), rgb(255, 187, 51) 15px, rgb(85, 136, 187) 0, rgb(85, 136, 187) 30px); 三、平行四边形和梯形使用
缺点:需要两个元素、修改的话需要修改两个地方。 如何使用一个元素就实现这样的效果。 解决办法:将平行四边形的背景设置在伪元素上,对伪元素进行变形。 #content { position: relative; display: flex; justify-content: center; align-items: center; width: 120px; height: 60px; font-size: 18px; font-weight: 600; color: #fff; &::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: skewX(-30deg); background: rgb(85, 136, 187); z-index: -1; }} 梯形的概念比平行四边形更加宽泛,只需要两条边平行即可。梯形常用于标签页,之前常用伪元素方法来实现一个梯形。
缺点:
通过构造平行四边形的思想,对矩形进行变形。但是这次不采用 这里需要用到
实现一个最简单的梯形所需要的代码只有以下一行: transform: perspective(200px) rotateX(30deg); 与
优化 1、修改 transform-origin: bottom; 2、通过
3、添加圆角、阴影、背景渐变 background: linear-gradient(to right, rgb(85, 136, 170), rgb(255, 187, 51));border-top-right-radius: 60px;border-top-left-radius: 60px;box-shadow: 10px 10px 10px 1px rgba(85, 136, 170, .2); 4、改变
缺点 斜边的角度依赖于元素的宽度。因此,当元素的内容长度不等时,想要得到斜度一致的梯形就不容易了。
四、阴影投影首先会想到 #shadow { width: 200px; height: 100px; background: rgb(255, 187, 51); box-shadow: 240px 120px 0 0 red;} 那么如何针对一张图片实现其对应的阴影?在页面的例如头像显示会遇到这种效果 这里将会使用到CSS3里面的
更多 |
|