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(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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
安装docker和docker-compose实例详解
2019/07/30 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python中threading超线程用法实例分析
2015/05/16 Python
python中PIL安装简单教程
2016/04/21 Python
python先序遍历二叉树问题
2017/11/10 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
谈谈Python中的while循环语句
2019/03/10 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
python中元组的用法整理
2020/06/15 Python
Pandas的Apply函数具体使用
2020/07/21 Python
利用python实现汉诺塔游戏
2021/03/01 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
运动会邀请函范文
2014/02/06 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
开展警示教育活动总结
2015/05/09 职场文书
新闻稿件写作范文
2015/07/18 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers