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 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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代码简化
2010/02/08 PHP
php checkbox 取值详细说明
2010/08/19 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
smarty内置函数section的用法
2015/01/22 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
自己的js工具 Event封装
2009/08/21 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
详解jQuery选择器
2016/12/21 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Python判断是否json是否包含一个key的方法
2018/12/31 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
港湾网络笔试题
2014/04/19 面试题
劳动工资科岗位职责范本
2014/03/02 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
实验心得体会范文
2016/01/25 职场文书
《月光曲》教学反思
2016/02/16 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python