什么是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 边框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之...
一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=属性值)格式...
1、纯工具操作步骤,懂代码更容易 划线就是不符合国人的审美观念,看着就别扭,...
前言 Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可...
本文没有咬文嚼字的地方,只是一个配色技巧的分享,十分简单,简单到流泪,但或...
作者:Joe Seifi 译者:前端小智 移动: https://mp.weixin.qq.com/s/p5... 有梦...
1.先瞧瞧效果: 2.代码是这样的: img src=images/circle.png alt= id=circle/@m...
背景 在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将...
折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发...
简介: 6月4日,以“开启分布式云新时代”为主题2021云边协同大会在北京举行,本...