CSS常用属性之边框

最新推荐文章于 2023-05-23 17:27:35 发布

骑着毛驴的小猴子

最新推荐文章于 2023-05-23 17:27:35 发布

阅读量513

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_31765427/article/details/73849908

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

border-width 边框的宽度
取值：像素《不能为负》
medium：默认3px；
thin:默认1px；
thick：默认5px；
取值数目：{1，4}
①如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
②如果只提供一个，将用于全部的四边。
③如果提供两个，第一个用于上、下，第二个用于左、右。
④如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

分项取值：border-top-width | border-right-width | border-bottom-width | border-left-width

border-style 设置边框的样式
常用取值：
none 无边框；
dotted: 点状轮廓。IE6下显示为dashed效果
dashed：虚线轮廓。
solid：实线轮廓
取值数目与含义同border-width

分项取值：border-top-style | border-right-style | border-bottom-style | border-left-style

border-color 设置边框的颜色
取值：
英文单词
rgb();
rgba();

取值数目与含义同border-width

分项取值：border-top-color| border-right-color| border-bottom-color | border-left-color

border
同时设置边框的样式、宽度、颜色。（三者顺序随意）
eg:border:1px solid #ddd;

分项取值：border-top| border-right| border-bottom| border-left

兼容性

border-radius
取值：
像素；
百分比；
取值数目：{1，2}
取值数目为2时，两个值用/分割，其中第一个值表示水平半径，第二个值表示垂直半径；取值数目为1时，第二个值默认等于第一个值。
水平半径以及垂直半径取值数目与含义又同border-width一样。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框倒角</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: deepskyblue;
            }
        </style>
    </head>
    <body>
        <div>

        </div>
    </body>
</html>

现在设置border-radius属性
1.设置取值为像素
设置边框倒角为10像素，结果如图所示
像图中黑色箭头所示，是以到两边都为10px的点为圆心画弧
2.设置取值为%，这里举例为画圆和椭圆
设置元素宽高相等，边框倒角为50%，即可画圆
设置元素宽高不相等，边框倒角为50%，即可画圆
3.取值数目为2，垂直半径不等于水平半径的情况
这里发现设置同一背景不好区分垂直于水平
设置4个边框颜色不等，方便观察
上下边框应为光滑曲线

圆角最大半径：宽度高度50%+边框宽度，如果设置大于最大半径，会自动缩放

box-shadow 边框阴影
取值：inset -10px 10px 150px 10px black|rgba(0,0,0,0.5);
①inset设置内阴影（不写时默认为外阴影）
默认外阴影

②影子沿x轴移动的距离
水平移动10px
③影子沿y轴移动的距离
垂直移动10px
④影子模糊程度（值越大越模糊）
设置模糊度
⑤影子尺寸倍数
默认为0，意思是指影子大小与元素大小相同。
取值为正数时，是再元素大小上每边加相应的数；
取值为负数时，是再元素大小上每边减相应的数；

设置影子尺寸为10px
⑥影子颜色

设置多重影子，用逗号隔开。
eg:box-shadow:inset -10px 10px 150px 10px black,-10px 10px 150px 10px black;

个性化影子设置：使用多个标签进行设置，然后移位重叠。

边框组成
每个边框是个梯形，一个矩形为4个梯形嵌套，使用边框绘制图形
无马赛克，但是PS做出来的有。在实际中我们使用边框绘制三角形、梯形等。
在这里强调一个color取值：transparent 样式为透明（仍然占位）
1.原理
边框都是梯形
边框宽度越大，梯形越大
2.绘制梯形
其他三个边设置为透明即可绘制出梯形
3.绘制三角形
当元素宽度或高度为0时，对应边边框由三角形组成

三角形的绘制与梯形绘制一样，将其余边设置为透明色即可。

骑着毛驴的小猴子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用属性之边框

border-width 边框的宽度取值：像素《不能为负》 medium：默认3px； thin:默认1px； thick：默认5px；取值数目：{1，4} ①如果提供全部四个参数值，将按上、右、下、左的顺序作用于四
复制链接

扫一扫