CSS3 (二) 边框

最新推荐文章于 2022-04-21 21:36:55 发布

游可

最新推荐文章于 2022-04-21 21:36:55 发布

阅读量1.4k

点赞数 2

分类专栏： CSS3 文章标签： css3 css

本文链接：https://blog.csdn.net/bao990423420/article/details/14126223

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS3 边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。

border-radius 属性创建圆角：

<!DOCTYPE html>
<html>
<head>
  
   <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style> 

/**
 CSS3 圆角边框
 text-align:center ;         文字居中
 border:2px solid #ffff00;   边框大小 、 边框黄色
 padding:10px 40px;          文字与上下间距、 左右间距
 background:#dddddd;         div 背景
 width:350px;                div 宽度
 border-radius:25px;         圆角大小
*/

div
{
text-align:center;     
border:2px solid #ffff00;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;

}
</style>
</head>


<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>
</html>

CSS3 边框阴影

box-shadow 用于向方框添加阴影：

<!DOCTYPE html>
<html>
<head>
  
   <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style> 

/**
 CSS3 边框阴影
 width:300px;                      div 宽度
 height:100px;                     div 高度
 background-color:#ff0000;         div 背景 红色
 
box-shadow: 10px 10px 5px #888888;       x轴偏移、 y轴偏移 、模糊值 、 阴影颜色    
*/

div
{
width:300px;
height:100px;
background-color:#ff0000;
box-shadow: 10px 10px 5px #888888;

}
</style>
</head>


<body>

<div></div>

</body>
</html>

CSS3 边框图片

border-image 属性，您可以使用图片来创建边框：

<!DOCTYPE html>
<html>
<head>
  
   <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style> 

/**
 CSS3 边框图片
 border-image-source                 用在边框的图片的路径
 border-image-slice                  图片边框向内偏移。
 border-image-width;                 图片边框的宽度
 
 
*/


.test{
	padding:10px;
	border-image-source:url(border.png);
	border-image-slice:27;
	border-image-width:auto;
}
}
</style>
</head>


<body>


<div class="test">用图片来做边框<br />border-image-width:auto;</div>


</body>
</html>

游可

关注

2
点赞
踩
0

收藏

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

CSS3 边框通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。border-radius 属性创建圆角： title /** CSS3 圆角边框 text-align:center ; 文字居中 border:2px sol
复制链接

扫一扫