css3边框

最新推荐文章于 2022-02-21 14:24:04 发布

QilongPan

最新推荐文章于 2022-02-21 14:24:04 发布

阅读量307

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/pql925/article/details/51881870

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1：border-radius 属性用于创建圆角

eg：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>
</html>

2：box-shadow 用于向方框添加阴影

eg：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

一般写3个像素值 + 一个颜色值 就行
前面第一个是指上下的阴影扩散程度，正值为向下扩散，负值为向上扩散，如果为0代表向上下同时根据第三个值的大小往外扩散。
第二个是指向左右扩散，正值为向右扩散，负值为向左，为0则代表向左右同时。
第三个值简单的理解为扩散的距离
颜色值 是指阴影的颜色，你可以想象阴影的第一个（不透明）的像素颜色就是它，然后逐渐的过度到完全透明。你上面的例子，是指它用的是RGB格式（3个255是白色，但后面的0.3让它变成灰色），也可以用类似 #666666

上面讲到第三个值（像素值）时，只简单的解释为“距离”，没有直接说是指：由“实”到完全透明的距离。就是因为你给出的例子里有“第四个像素值”，这个是指阴影“扩展”。如果你会PS的话，这个很好理解；否则，你看下我下面说的，考考你理解力。
首先，第三个值已经设定阴影的距离，第四个值并不会改变这个距离。因此，它能改变的就是阴影的“透明度”。阴影一般的效果都是由不透明到完全透明，而第四个值就让阴影在设定的距离内（第三个值），阴影不完全透明（即阴影效果为不透明到半透明）。

当然第四个值如果设置比第三个值小很多的话，你基本感觉不出变化，设置大点能感觉出来。

3：border-image 属性，您可以使用图片来创建边框

<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 30 30 round;   /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;   /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;       /* Opera */
border-image:url(/i/border.png) 30 30 round;
}

#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;   /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;   /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;   /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img src="/i/border.png">

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>

</body>
</html>
首先我们来看一下与border-image相关的一些属性，有border-image-source、border-image-slice、border-image-repeat

border-image-souce属性，它就像background-image一样，也采用url()作为它的值

border-image-slice可以取1-4个值，它就像border-width一样，它的几个值遵循上、右、下、左(top、right、bottom、left)的原则，但这几个值是不能带单位的，可以取数字或百分比，当取数字时默认单位为像素(px)。刚才我们提到了切割，那么它是怎么切割的呢？假如取四个值10 15 30 20，那么切割图如下：

加个边框

看，像不像9宫格呢？其实border-image-slice就是把边框图片分为了9个部分，假如改属性取一个值30，那么就把边框图片分成了9等份。

border-image-repeat属性共有3个值：stretch(拉伸)、repeat(重复)、round(平铺)，其中stretch是默认值。在使用时可以取1到2个参数，比如：

border-image:url(borderimage.png) 30;

就等同于

border-image:url(borderimage.png) 30 stretch stretch;

表示水平方向和垂直方向均使用stretch参数，即水平方向和垂直方向都拉伸。

如果是：

border-image:url(borderimage.png) 30 round repeat;

则边框图片在水平方向上平铺，在垂直方向上重复。

QilongPan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3边框

1：border-radius 属性用于创建圆角eg： div{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;border-radius:25px;-moz-border-radius:25px; /*
复制链接

扫一扫

专栏目录