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 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
Node.js实现文件上传
2016/07/05 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
JS中的phototype详解
2017/02/04 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
JsChart组件使用详解
2018/03/04 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
Python中for循环详解
2014/01/17 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python文件和文件夹复制函数
2020/02/07 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
局域网标准
2016/09/10 面试题
预备党员的自我评价
2014/03/12 职场文书
终止合同协议书
2014/04/17 职场文书
申报优秀教师材料
2014/12/16 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python