Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge points about how to achieve rounded borders and border shadows in css3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Border-radius adds a fillet border to the element, in css3. IE9+ chrome safari5+ firefox4+ now supports both. You can set borders to input div and so on. Similar to border, you can set the four corners together or individually.

Syntax:

The code is as follows:

Border-radius: 1-4 length |% / 1-4 length |%

-moz-border-radius:10px; supports the old firefox

-webkit-border-radius:10px; supports chrome

Set the value of each radius in the order of top-left, top-right, bottom-right, bottom-left. 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:

The code is as follows:

Border-radius:2px

Equivalent to:

The code is as follows:

Border-top-left-radius:2px

Border-top-right-radius:2px

Border-bottom-right-radius:2px

Border-bottom-left-radius:2px

Example 2:

The code is as follows:

Border-radius:2em 1em 4em / 0.5em 3em

Equivalent to:

The code is as follows:

Border-top-left-radius:2em 0.5

Border-top-right-radius:1em 3em

Border-bottom-right-radius:4em 0.5em

Border-bottom-left-radius:1em 3em

Box-shadow adds one or more shadows to the box. The box-shadow attribute is supported by IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.

Syntax:

The code is as follows:

Box-shadow: h-shadow v-shadow blur spread color inset

Hshadowm.vWhitshade must be. The position of horizontal, vertical shadows. Allow assignment. Blur optional, blur distance. Spread optional, the size of the shadow. Color optional, the color of the shadow. Inset optional, change the external shadow (outset) to the inner shadow.

Example:

The code is as follows:

Box-shadow: inset 3px 3px 6px # ccc

These are all the contents of this article entitled "how to achieve rounded borders and border shadows in css3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.