6 years ago (2014-12-06)  Algorithm language |   First to comment  9 
post score 0 times, average 0.0

Border-radius Adds rounded borders to elements, in css3.IE9+ chrome safari5+ firefox4+ now support.You can set borders for input divs, etc.Similar to border, it can be set together with four corners, or it can be set separately.

1. Rounding effect

Effect demonstration:

Css3 rounded border and border shadow example - Wang Boyuan's blog

grammar:

code show as below:

Set the value of each radius in top-left, top-right, bottom-right, bottom-left order.If bottom-left is omitted, it is the same as top-right.If bottom-right is omitted, it is the same as top-left.If top-right is omitted, it is the same as top-left.

Example 1:

code show as below:

Equivalent to:

code show as below:

Example 2:

code show as below:

Equivalent to:

code show as below:

 Shadow effect

Effect demonstration:

Css3 rounded border and border shadow example - Wang Boyuan's blog

Box-shadow Adds one or more shadows to the box.IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1 support the box-shadow property.

grammar:

code show as below:

H-shadow, v-shadow must.Horizontal, vertically shaded position.Allow assignment.Blur optional, fuzzy distance.Spread optional, the size of the shadow.Color optional, the color of the shadow.Inset is optional, changing the outer shadow (outset) to inner shadow.

example:

code show as below:

  
 
关注我的微信

关注我的微信,获取文章更新

如果你觉得这篇文章对你有用,可以点击下面的“赞助作者”打赏作者!

转载注明原文出处:Baiyuan's Blog>>https://wangbaiyuan.cn/en/css3-rounded-corners-and-shadow-border-example-2.html

Post comment

Style

No Comment

登录

Forget password?

您也可以使用第三方帐号快捷登录

切换登录

注册

TW