在网页设计过程中正确理解css圆角边框及背景图

建网站  时间:2021-03-21  987 次浏览  css圆角边框边框渐变色填充

建企业网站时使用CSS边框圆角是很容易的事,但要设置边框圆角的渐变效果就需要费些功夫了,需要正确理解几个CSS属性的含义,background-origin,background-clip,background-size这几个是必须用到的,调整好性能的数值就可以灵活运用了。

03202.jpg

想要实现CSS圆角渐变并匹配内容背景图可以参考以下代码:

<style>
div {
 width: 500px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明,确保背景渐变色显示*/
 background-origin:border-box; /*从边框开始背景图*/
 background-clip:padding-box,border-box; /*设置第一个背景和第二个背景的范围*/
 background-size:cover;
 /*由于背景图像不能设置纯色,所以可以使用下面的方式设置纯色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); 
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>

<div>
<span class="a1">边框渐变色从内边框到边框,背景图像单独设置不重复。</span>
</div>

background-origin表示的是背景起始位置,其三个值如下,依次是

border-box 从边框开始;
padding-box(默认) 从内边距开始;
content-box 从内容开始。

background-origin: border-box | padding-box(默认) | content-box

background-clip表示的是背景填充位置,其四个值如下,依次是

border-box(默认) 填充至边框;
padding-box 填充至内边距;
content-box 填充之内容;
text 作为字体前景色。

background-clip: border-box(默认) | padding-box | content-box | text

background-size表示的是背景尺寸,其五个值如下,依次是

contain 将图像扩大至适应最短的边,剩余部分默认重复图像
cover 将图像扩大至适应最长的边,图像可能显示不完整
length 两个值依次设置图像宽和高,未设置则为auto
percentage 两个百分比依次设置图像宽和高,未设置则为auto
auto 默认设置


本文地址:在网页设计过程中正确理解css圆角边框及背景图 https://www.371jianzhan.com/technical/200.html


上一篇: 在搜索引擎推广中如何进行SEM数据分析

下一篇: Linux系统CentOS下如何挂载磁盘

最新信息
推荐信息
建企业网站
建企业网站