CSS3边框

最新推荐文章于 2023-11-14 21:55:36 发布

VVVGG

最新推荐文章于 2023-11-14 21:55:36 发布

阅读量282

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/VVVZCS/article/details/82774209

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1，border-radius

画一个圆：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #f40;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

border-radius 设置圆角这是简写形式，
其他四种形式分别为
border-top-left-radius(左上角),
border-top-right(右上角),l
border-bottom-left-radius(左下角),
border-bottom-right-radius(右下角),
参数形式为 r1 px , r2 px; r1,r2分别为椭圆的实轴和虚轴也可以直接写成 n px;

2，box-shadow

box-shadow：h-shadow v-shadow blur spread color inset/outset
设置div框的阴影
h-shadow 水平阴影的位置正值表明阴影在div右侧，负值为div左侧（必须）
v-shadow 垂直阴影的位置正值表明阴影在div下方，负值为div上方（必须）
blur 模糊距离（可选）
spread 阴影的大小，模糊半径（可选）
color 阴影的颜色（可选）
inset/outset 阴影模式，inset 内阴影，outset 外阴影，默认外阴影（可选）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 100px;
      margin-left: 20px;
      margin-top: 20px;
      height: 100px;
      background-color: #f40;
      box-shadow: 4px 4px 8px #000;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 100px;
      margin-left: 20px;
      margin-top: 20px;
      height: 100px;
      background-color: #fff;
      box-shadow: 4px 0px 8px #000, 0px -4px 8px blue, 0px 4px 8px red, -4px 0px 8px green;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

3，border-image

语法：

border-image: source slice width outset repeat | initial | inherit

值：

border-image-source：用于指定要用于绘制边框的图像的位置

border-image-slice：图像边界向内偏移

border-image-width：图像边界宽度

border-image-outset：用于指定在边框外部绘制border-image-area的量

border-image-repeat：用于设置图像边界是否重复（repeat），拉伸（stretch）或铺满（round）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 20px;
      width: 100px;
      height: 100px;
      border: 30px solid transparent;
      padding: 20px;
      border-image: url(border.png) 27 round;
    }
  </style>
</head>
<body>
  <div>This is a div</div>
</body>
</html>

图片下载地址：

https://www.runoob.com/images/border.png

下面这篇作者的文章写的很好，推荐看一下

https://segmentfault.com/a/1190000010969367

VVVGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3边框

1，border-radius画一个圆：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&
复制链接

扫一扫