您现在的位置是：网站首页> 编程资料编程资料

CSS3圆角边框和边界图片效果实例 CSS3实现多样的边框效果css3 边框、背景、文本效果的实现代码CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集利用CSS3伪元素实现逐渐发光的方格边框纯CSS3制作的鼠标悬停时边框旋转CSS3实现多背景模拟动态边框的效果css3实现六边形边框的实例代码

2023-10-21 219人已围观

简介这篇文章主要为大家详细介绍了CSS3边框的不同效果实现代码，包括CSS3圆角边框、盒阴影、边界图片的制作方法，感兴趣的小伙伴们可以参考一下

本文的学习要点如下：

•圆角 border-radius
•盒阴影 box-shadow
•边界图片 border-image

1.圆角 border-radius

XML/HTML Code复制内容到剪贴板

<div>border-radius 属性允许您为元素添加圆角边框！ div>
div {
width: 200px;
height: 100px;
padding:20px;
border: 1px solid red;
border-radius : 25px;
}

2.盒阴影 box-shadow

XML/HTML Code复制内容到剪贴板

<div>div>
div {
width: 200px;
height: 100px;
background: red;
/*x轴偏移量 y轴偏移量模糊程度阴影颜色*/
box-shadow: 10px 10px 5px #000;
}

3.边界图片 border-image

html部分

XML/HTML Code复制内容到剪贴板

<p><b>注意: b> Internet Explorer 不支持 border-image 属性。p>
<p> border-image 属性用于设置图片的边框。p>
<div id="round">这里，图像平铺（重复）来填充该区域。div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。div>
<p>这是我们使用的图片素材：p>
<img src="images/border.png" />

css部分

CSS Code复制内容到剪贴板

div {
width: 250px;
padding: 10px 20px;
border: 15px solid translate;
}
#round {
/*safari*/
/*图片源图片边界向内偏移量图片的宽度用于指定在边框外部绘制 border-image-area 的量样式*/
-webkit-border-image : url(../images/border.png) 30 30 round;
/*opera*/
-o-border-image : url(../images/border.png) 30 30 round;
border-image : url(../images/border.png) 30 30 round;
}
#stretch {
-webkit-border-image : url(../images/border.png) 30 30 stretch;
-o-border-image : url(../images/border.png) 30 30 stretch;
border-image : url(../images/border.png) 30 30 stretch;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：CSS实现隐藏和显示功能的代码CSS文本超出指定宽度后隐藏并显示为省略号的实现方法利用css的样式对文本进行隐藏和显示等操作css样式显示省略号自定义宽度超过隐藏显示省略标记css样式的动态添加及显示和隐藏等零碎用法纯css3显示隐藏一个div特效的具体实现css和jquery设置文字的显示和隐藏利用CSS3的checked伪类实现OL的隐藏显示的方法从A页面连接到B页面后并直接把B页面的隐藏层显示-CSS教程-网页制作-网

下一篇：CSS文本和div垂直居中方法总结 CSS水平垂直居中的几种方法总结css让容器水平垂直居中的7种方式利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS设置文字图片垂直居中的方法总结深入理解CSS行高line-height与文本垂直居中的原理Flexbox制作CSS布局实现水平垂直居中的简单实例CSS设置DIV垂直居中的N种方法兼容IE浏览器 CSS 实现垂直居中的几种方法(必看)CSS在固定宽高的div内实现垂直居中的实例详解CSS实现垂直居中的几种方法小结

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网