CSS3新增边框属性(五)

1、新增边框属性

1.1 border-radius

设置盒子的圆角。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>border-radios</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            /* 同时设置四个方向的圆角 */
            /* border-radius: 10px; */
            border-radius: 50%;
            /* 设置左上圆角 */
            /* border-top-left-radius: 10px; */
            /* 设置右上圆角 */
            /* border-top-right-radius: 20px; */
            /* 设置右下圆角 */
            /* border-bottom-right-radius: 20px; */
            /* 设置左下圆角 */
            /* border-bottom-left-radius: 10px; */
        }
    </style>
</head>

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

</html>
1.2 outline
  • outline-width:外轮廓宽度;
  • outline-color:外轮廓颜色;
  • outline-style:外轮廓风格;
    • none:无轮廓;
    • dotted:点状轮廓;
    • dashed:虚线轮廓;
    • solid:实线轮廓;
    • double:双线轮廓。
  • outline:宽度 样式 颜色

可以使用outline-offset属性设置外边框与盒子的距离。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>outline</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 10px solid black;
            padding: 10px;
            background-color: aqua;
            margin: 0 auto;
            margin-top: 50px;

            outline: 10px dashed rgb(0, 42, 255);
            outline-offset: 20px;
        }
    </style>
</head>

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

</html>
相关推荐
红绿鲤鱼1 分钟前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo12 分钟前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花19 分钟前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ28 分钟前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
西凉河的葛三叔32 分钟前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
周三有雨39 分钟前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
木古古181 小时前
使用chrome 访问虚拟机Apache2 的默认页面,出现了ERR_ADDRESS_UNREACHABLE这个鸟问题
前端·chrome·apache
爱米的前端小笔记1 小时前
前端八股自学笔记分享—页面布局(二)
前端·笔记·学习·面试·求职招聘
loey_ln1 小时前
webpack配置和打包性能优化
前端·webpack·性能优化