CSS3 边框属性

最新推荐文章于 2024-05-18 14:24:10 发布

苦涩2020

最新推荐文章于 2024-05-18 14:24:10 发布

阅读量349

点赞数

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/106102856

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

CSS3

20 篇文章

订阅专栏

CSS3 边框属性

边框设置
圆角边框
边框阴影
轮廓设置

边框设置

边框四大要素：边框宽度、边框颜色、边框样式、边框方向

border-边框方向:边框宽度边框颜色边框样式 属性值之间有空格隔开，并且属性值不顺序要求

边框宽度：可以使用合法的尺寸单位：px（推荐使用），em，rem。注意：不能使用百分比
边框颜色：可以使用颜色名、16进制颜色值、rgb颜色值（推荐使用）、rgba颜色值
边框样式：实线：solid、虚线：dashed、双线：double、点状：dotted
边框方向：写在属性名中，在border-之后。top上、bottom下、left左、right右
四个方向设置一样的边框，就是省去边框方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框设置</title>
    <style type="text/css">
        div{
            width: 200px; height: 100px; line-height: 100px;
            text-align: center; background-color: aqua;
            border-top: 4px red solid;
        }
    </style>
</head>
<body>
    <div>边框设置</div>
</body>
</html>

圆角边框

border-垂直方向-水平方向-radius:水平半径垂直半径

圆角方向：通过垂直和水平方向可以表示一个角（方向1：上下、方向2：左右）
圆角半径：水平半径、垂直半径
当圆角半径设置成一个值时，那么另一个值和第一个值一样
当使用%设置半径时，半径的值是元素宽度或高度的百分比

同时设置4个圆角边框

border–radius:左上角右上角下右角下左角

border–radius:左上角右上角和下左角下右角

border–radius:左上角和右下角右上角和左下角

border–radius:四角一样的值

border-radius: 50px 40px 10px 30px;

边框阴影

box-shadow:值1 值2 值3 值4 值5;

值1：水平阴影位置，必须。正值时，阴影在右，负值时，阴影在左
值2：垂直阴影位置，必须。正值时，阴影在下，负值时，阴影在上
值3：阴影模糊距离，可选值
值4：阴影尺寸，可选值
值5：阴影颜色，合法颜色值，可选，默认黑色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框阴影</title>
    <style type="text/css">
        img{
            box-shadow: 3px 5px 4px 8px #ccc;
        }
    </style>
</head>
<body>
    <img src="头像.png" alt="">
</body>
</html>

轮廓设置

outline:边框宽度、边框颜色、边框样式

轮廓会加在边框之外，如input标签在获得焦点时，显示在边框的颜色样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓及样式重置</title>
    <style type="text/css">
        div{
            width: 150px; height: 150px; background-color: blanchedalmond;
            border: 24px solid red; 
            border-radius: 20px; 
            box-shadow: 1px 1px 1px #ccc;
            outline: 10px solid blue;
        }
        input, textarea,select{
            outline: none;
        }
    </style>
</head>
<body>
    <div>轮廓设置</div>
    <hr>
    <input type="text">
    <textarea cols="30" rows="10"></textarea>
    <select name="sel">
        <option value="A">A</option>
    </select>
</body>
</html>