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>
相关推荐
minDuck2 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!23 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。28 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼34 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093338 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂2 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙