CSS3 边框详解编程语言
2023-06-13 09:11:43 时间
一、CSS3 边框
用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。
在本章中,您将了解以下的边框属性:
border-radius box-shadow border-image 二、CSS3 圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。
在 CSS3 中,很容易创建圆角。
在 CSS3 中 border-radius 属性被用于创建圆角:
这是圆角边框!/*在div中添加圆角元素*/ border:2px solid; border-radius:25px; }
效果:
CSS3 中的 box-shadow 属性被用来添加阴影:
/*在div中添加box-shadow属性*/ box-shadow: 10px 10px 5px #888888; }
效果:
有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框:
border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:在 div 中使用图片创建边框:
/*在 div 中使用图片创建边框*/ border:15px solid transparent; width:250px; padding:10px 20px; #round -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; #stretch -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; }
效果:
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/16726.html
cjava相关文章
- CSS3实现的动画效果下拉导航菜单效果详解编程语言
- CSS3实现扇形动画菜单特效详解编程语言
- 整理一下以前的Html+css3复习笔记详解编程语言
- CSS3/jQuery自定义弹出窗口详解编程语言
- CSS3中REM使用详解编程语言
- CSS3 圆形时钟式网页进度条详解编程语言
- CSS3中:nth-child和:nth-of-type的区别深入理解详解编程语言
- CSS3的文字阴影—text-shadow详解编程语言
- css3 line-height:0的作用详解编程语言
- css3 pointer-events:auto;详解编程语言
- css3 font-spider压缩自定义字体的方法详解编程语言
- css3图片大小自适应的方法(不采取拉伸)详解编程语言
- css3 简单的玻璃扫光效果详解编程语言
- CSS3 滤镜Filter亮度动画详解编程语言
- CSS3倒影效果详解编程语言
- CSS3幸运大转盘最简单的写法详解编程语言
- CSS3做动物走路效果详解编程语言
- css3自定义上传图片输入框的方法详解编程语言
- css3 float排序问题详解编程语言
- css3关于body的默认滑动机制详解编程语言
- css3软键盘不盖住输入框的方法详解编程语言
- CSS3解决字母不换行的方法详解编程语言