CSS3 边框效果


Posted in HTML / CSS onNovember 04, 2019

什么是CSS#

CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或“级联样式表”,简称样式表。

CSS的主要作用#

它主要是用来给HTML网页来设置外观或样式。外观或样式:HTML网页中的文字的大小、颜色、字体,网页的背景颜色、背景图片。

CSS3 边框

CSS3 边框#

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

您将学到以下边框属性:border-radius、box-shadow、border-image。

一、圆角边框border-radius#

在 CSS3 中,border-radius 属性用于创建圆角:

1.1、border-radius语法#

基本写法如下:

设置左上角

border-top-left-radius:10px;

设置右上角

border-top-right-radius:10px;

设置左下角

border-bottom-left-radius:10px;

设置左下角

border-bottom-right-radius:10px;

简写设置四个角

执行顺序如下: 左上-右上-右下-左下

border-radius:1px 2px 3px 4px;

设置四角值统一

border-radius:10px;

支持百分比

border-radius:100%;

支持em

border-radius:2em;

支持运算

border-radius:30px/30px; /*支持加和除 其余的不支持*/

JavaScript语法

document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2浏览器兼容性#

-webkit:代表Webkit枘核浏览器,如chrome and safari私有属性或内核识别码。

-webkit-border-radius:5px; -moz:代表Firefox浏览器私有属性或内核识别码。

-moz-border-radius:5px;

ms代表ie浏览器私有属性或内核识别码。

-ms-border-radius: 5px;

-o-代表欧朋opera浏览器私有属性或内核识别码。

-o-border-radius: 5px;

IE9+、Firefox 4+、Chrome、Safari 5+以及 Opera支持 border-radius 属性。

border-radius:10px;

总结

以上所述是小编给大家介绍的CSS3 边框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 #HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 #HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 #HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 #HTML / CSS
CSS3 @media的基本用法总结
Sep 10 #HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 #HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 #HTML / CSS
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
基于jquery实现左右上下移动效果
2018/05/02 jQuery
jQuery 查找元素操作实例小结
2019/10/02 jQuery
JS实现点击掉落特效
2021/01/29 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 可爱的大小写
2008/09/06 Python
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python求导数的方法
2015/05/09 Python
Python实现的密码强度检测器示例
2017/08/23 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Python threading的使用方法解析
2019/08/28 Python
python迭代器常见用法实例分析
2019/11/22 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
医药专业推荐信
2013/11/15 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
喝酒检查书范文
2014/02/23 职场文书
月考总结与反思
2015/10/22 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL