什么是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 边框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

标签:
css3,边框

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“CSS3 边框效果”
暂无“CSS3 边框效果”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。