HTML5技术

css3实现圆角边框渐变 - 就只是小茗

字号+ 作者:H5之家 来源:H5之家 2017-03-08 15:00 我要评论( )

button112233/button 创建button .border{position: relative;border: 4px solid transparent;border-radius: 16px;background: linear-gradient(orange, violet);background-clip: padding-box;padding: 10px;/* just to show box-shadow still works fine

<button>112233</button>

  创建button

.border{ position: relative; border: 4px solid transparent; border-radius: 16px; background: linear-gradient(orange, violet); background-clip: padding-box; padding: 10px; /* just to show box-shadow still works fine */ box-shadow: 0 3px 9px black, inset 0 0 9px white; } .border::after{ position: absolute; top: -4px; bottom: -4px; left: -4px; right: -4px; background: linear-gradient(red, blue); content: ''; z-index: -1; border-radius: 16px; }

  css3样式

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Css3中拖拽效果的实例(带有注释~欢迎指教) - 一混五六年

    Css3中拖拽效果的实例(带有注释~欢迎指教) - 一混五六年

    2017-03-04 10:00

  • [前言] 实现一个Android电子书阅读APP - xfangs

    [前言] 实现一个Android电子书阅读APP - xfangs

    2017-03-04 09:03

  • 立体骰子(css3和js) - 柿子橙

    立体骰子(css3和js) - 柿子橙

    2017-02-26 14:00

  • HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    2017-02-23 14:05

网友点评