css3边框圆角阴影

最新推荐文章于 2024-07-17 18:39:50 发布

我是滑稽帝滑滑稽

最新推荐文章于 2024-07-17 18:39:50 发布

阅读量1k

点赞数

分类专栏：前端CSS 文章标签： css3border-radius css3border-shadow css3边框圆角边框阴影

本文链接：https://blog.csdn.net/cacacacacacacaa/article/details/52669713

版权

前端CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
            border: 2px solid #a1a1a1;
            padding:10px 40px;
            background-color: antiquewhite;
            width: 350px;
            border-radius: 25px;                      //radius是半径的意思
            -moz-border-radius: 25px;

            box-shadow: 10px 10px 5px #888888;
            -moz-box-shadow: 10px 10px 5px #888888;
            
        }
    </style>
</head>
<body>
    <div>这是测试css3圆角效果</div>
</body>
</html>


 
 
  
  定义和用法
  
  box-shadow 属性向框添加一个或多个阴影。
  
  提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
  
  默认值： none
继承性： no
版本： CSS3
JavaScript
 语法： 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) 改为内部阴影。 测试

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

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