CSS3 边框属性详解：border-radius、box-shadow、border-image

最新推荐文章于 2024-08-10 17:53:33 发布

青颜的天空

最新推荐文章于 2024-08-10 17:53:33 发布

阅读量960

点赞数

分类专栏： CSS 文章标签： CSS3 border

本文链接：https://blog.csdn.net/a1056244734/article/details/107692002

版权

CSS 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

CSS3 有三个边框属性

border-radius

border-radius: 1-4 length|% / 1-4 length|%;

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

border-image

1. 浏览器支持

浏览器支持

2. border-radius

定义和用法

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.borderRadius="5px"

语法 ```css border-radius: 1-4 length|% / 1-4 length|%; ``` 【注意】: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

值	描述
length	定义弯道的形状
%	定义角落的形状

eg1:

border-radius:2em;

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

eg2：

border-radius: 2em 1em 4em / 0.5em 3em;

等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 边框</title>
  <style>
    div {
      text-align: center;
      border-top-left-radius: 2em 0.5em;
      border-top-right-radius: 1em 3em;
      border-bottom-right-radius: 4em 0.5em;
      border-bottom-left-radius: 1em 3em;
      padding: 10px 40px;
      background: antiquewhite;
      width: 200px;
      margin: 0 auto;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div>等价于border-radius: 2em 1em 4em / 0.5em 3em</div>
</body>
</html>

border-radius

3. box-shadow

定义和用法

box-shadow 属性向框添加一个或多个阴影。

【提示】：使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

【注意】: box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      width: 300px;
      height: 100px;
      background-color: #ff9900;
      -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
      box-shadow: 10px 10px 5px #888888;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>