圆角按钮css,基于CSS3的一组圆角按钮

CSS3作为对CSS的升级，将原有的一些大模块分解为更小更易于表达的小模块，取得了相当的好评，也使得开发周期变短、过程变得愉快！

今天分享一下自己使用的基于CSS3的一组圆角按钮，效果不错，但欢迎升级指正！

这组圆角按钮，使用了CSS3的 border-radius 和 box-shadow 属性！

先分享一下haibor对这两个属性的理解：

Border Radius：边界半径，写法类似内边距(padding)和外边距(margin)属性。例如：border-radius:20px，这表示四个角半径均为20px，也可单独为每个边角设定不同的值：

border-top-left-radius:5px;

border-top-right-radius:10px;

border-bottom-left-radius:15px;

border-bottom-right-radius:20px;

ps.浏览器兼容仍然是个问题，为使浏览器渲染边界半径属性，需要在属性名称加上前缀，Webkit 引擎的浏览器为 "-webkit-"，Firefox 则为 "-moz-"，即：

-webkit-border-radius:5px;

-moz-border-radius:5px;

Box Shadow：盒阴影的结构和 text-shadow 相同，用法：box-shadow:0 1px 2px #aabbcc，分别为：x 轴偏移、y 轴偏移、模糊、颜色。

概念说完了，下面直接分享效果图吧：

具体代码这里就不赘述了，可看DEMO演示的源代码！

圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei相关推荐

html 让按钮立体,纯CSS3打造立体质感按钮
此CSS3按钮包含5个实例DEMO,自适应宽度,立体感强并带有鼠标滑过效果.开发产品.软件必备素材.下载此效果. CSS3按钮HTML代码: Click me! Come on, don't be ...
html css文本框按钮,css样式之区分input是按钮还是文本框的方法
当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表 ...
基于css3的鼠标滑动按钮动画之CSS--续
2019独角兽企业重金招聘Python工程师标准>>> btn2 /*--按钮1--*/ .container1 {width:200px;display:block;margin: ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影
目录前言一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置结语前言本节介绍仅在CSS3中的新内容,例如 ...
html怎样设置图片的圆角矩形,css怎么画圆角矩形？
css怎么画圆角矩形?下面本篇文章就来给大家介绍一下使用css画圆角矩形的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以通过圆角边框border-radius ...

圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei

圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei相关推荐

最新文章

热门文章