css3边框详解

最新推荐文章于 2024-08-05 22:52:29 发布

chq_yys

最新推荐文章于 2024-08-05 22:52:29 发布

阅读量667

点赞数

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

本文链接：https://blog.csdn.net/qq_38390669/article/details/109047714

版权

标题边框的基本属性border-width:设置元素边框的粗细border-color:设置元素边框的颜色border-style:设置元素边框的类型三个属性合并写法border:border-width border-style border-color;.elm{border:3px red}是没有任何效果的，此时border-style解析成为nonecss中的border可以给不同的边设置不同的风格，遵守trbl原则border-top-styleborder-right

摘要由CSDN通过智能技术生成

标题边框的基本属性

border-width:设置元素边框的粗细
border-color:设置元素边框的颜色
border-style:设置元素边框的类型

三个属性合并写法

border:border-width border-style border-color;

.elm{border:3px red}是没有任何效果的，此时border-style解析成为none

css中的border可以给不同的边设置不同的风格，遵守trbl原则

border-top-style
border-right-syle
border-bottom-style
border-left-style

同理 border-color与border-width一样使用

border-style边框类型

在这里插入图片描述

border-color属性的语法及参数

border-color:[<color> | transparent]{1,4} | inherit

如果需要使用多颜色，则将border-color拆分成四个边框来写

border-top-colors:[<color> | transparent]{1,4} | inherit
border-right-colors:[<color> | transparent]{1,4} | inherit
border-bottom-colors:[<color> | transparent]{1,4} | inherit
border-left-colors:[<color> | transparent]{1,4} | inherit

border-color属性还没成为标准规范，为了让不同浏览器能正常渲染，需要加上前缀
google浏览器内核前缀为-webkit-
在这里插入图片描述
当border-color只设置一个颜色值时，效果和CSS1中的border-color效果一样。只有设置了n个颜色，并且边框宽度也为n像素，就可以使用CSS3的border-color属性设置n个颜色，每种颜色显示1像素的宽度，如果宽度值大于颜色数量的值，最后一种颜色用于显示剩下的宽度。例如，元素的边框设置为20px，而元素的边框颜色只设置了10个，剩下的10px宽度都将显示最后一种颜色

border-color制作立体渐变边框

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>border-color制作立体渐变边框效果</title>
<style type="text/css">
div{
    
width: 200px;
height: 100px;
border: 10px solid transparent;
border-radius: 15px 0 15px 0;
-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

border-image属性的语法及参数

border-image : none | <image> [<number> | <percentage>] {1, 4} [/ <border-width>] {1, 4} ] ? [stretch | repeat | round] {0, 2}

none：默认值，表示边框无背景图片。
<image>：设置背景图片，这跟background-image一样，可以使用绝对或相对的URL地址，来指定边框的背景图片。
<number>：number是一个数值，用来设置边框或者边框背景图片的大小，其单位就是像素(px)，可以使用 1~4 个值，表示4个方位的值，可以参考 border-width的设置方式
<percentage>：percentage也是用来设置边框或者边框背景图片的大小，跟number不同之处是，percentage使用的是百分比。

stretch、repeat、round：这三个属性参数是用来设置边框背景图片的铺放方式，类似于background-repeat，其中stretch会拉伸边框背景图片、repeat是会重复边框背景图片、round是平铺边框背景图片，其实stretch为默认值。
border-image和background-image之间有一些类似之处，包括图片的引用和排列方式。

border-image属性使用方法

引入背景图片：border-image-source
切割引入北京图片：border-image-slice
边框图片的宽度：border-image-width
边框背景图片的排列方式：border-image-repeat

border-image-source

border-image-source : url(image url);   //image url可以是相对地址也可以是绝对地址。

border-image-slice

border-image-slice : [<number> | <percentage>] {1, 4} && fill ?

取值支持<number>| <percentage>其中number是没有单位的，因为其默认的单位就是像素。除了直接用number来设置外，还可以使用百分比值来表示，即相对于边框背景图片而言的。
例如边框的大小是300px*240px 取百分比为25% 30% 15% 20%
实际效果如图所示
剪切的特性(slice)。在border-image中slice是一个关键部分，也是让人难以理解的部分。

九宫格
2 4 6 8 部分没有展示效果
1 3 7 9属于展示效果区域
1 9 受到水平方向效果影响

repeat 水平重复
round 水平平铺
stretch 水平拉伸

在这里插入图片描述
1.水平round效果
2.水平repeat效果
3.水平stretch效果

border-top-image和border-bottom-image作用区域仅在水平方向并不会影响垂直方向的效果

1.垂直round效果
2.垂直repeat效果
3.垂直stretch效果
border-right-image和border-left-image作用在垂直方向

border-image-width

设置边框背景图片的显示大小

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

和border-width使用方法一样

border-image-repeat

用来指定边框背景图片的排列方式默认值为stretch

border-image-repeat: [ stretch | repeat | round ]{1,2}

border-image-repeat是用来指定border-image的排列方式，这个属性设置参数和其他的不一样，border-image-repeat不遵循top,right,bottom,left的方位原则，他只接受两个（或一个）参数值，第一个表示水平方向，第二个表示垂直方向；当取值为一个值时，表示水平和垂直方向的排列方式相同。同时其默认值是stretch，如果你省略不取值时，那么水平和垂直方向都是以stretch排列。

在这里插入图片描述

上面我们把border-image像background-image一样分解开给大家介绍了其相关的知识点，但是在实际应用中，我们不是能分解的，必须写在一起
border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>

3-7 CSS3的border-image制作按钮
3-8 CSS3的border-image制作tabs效果
3-9 CSS3的border-image制作圆角和阴影效果

border-radius

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

如果/存在，/前面的值是设置元素圆角的水平方向半径，/后面的值是设置元素圆角的垂直方向的半径
如果/不存在，则元素圆角的水平和垂直方向的半径值相等

1、border-radius: [ <length>{1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等。

2、border-radius:[<length>{1,4} ] [ {1,4} ]; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值。

3、border-radius:[ <length>{1,4} ] [ {1,4} ] [ {1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right。

4、border-radius:[<length>{1,4} ] [ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left。

border-radius和border属性一样，还可以把各个角单独拆分出来，这样就派生出另外四个子属性，他们都是先Y轴在X轴，具体看下面

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

各角拆分出来取值方式：第一个值是水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆，如果任意一个值为0，那么这个角就不是圆角。

border-radius属性使用

在这里插入图片描述

1.水平和垂直半径一样

border-radius只设置一个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 的 border-radius 制作圆角</title>
    <style>
        .border-radius{
    
            width: 250px;
            height: 100px;
            border: 10px solid orange;
            border-radius: 10px;
        }
    </style>
</head>
<body>

最低0.47元/天解锁文章

chq_yys

关注

0
点赞
踩
5

收藏

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

标题边框的基本属性border-width:设置元素边框的粗细border-color:设置元素边框的颜色border-style:设置元素边框的类型三个属性合并写法border:border-width border-style border-color;.elm{border:3px red}是没有任何效果的，此时border-style解析成为nonecss中的border可以给不同的边设置不同的风格，遵守trbl原则border-top-styleborder-right
复制链接

扫一扫

专栏目录