Shulou(Shulou.com)06/03 Report--

This article shows you how to use the CSS3RGBA color mode, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

RGBA color mode is an extension of RGB color mode, which adds opacity parameters to red, blue and green primary colors. The syntax is as follows:

Rgba (rmag _ r _ b,)

The proportion of the three primary colors of red, blue and green is indicated by rrecalognomy b. The value can be an integer or a percentage. The range of positive integer values is 0: 255, and the range of percentage values is 0. 0% 100. 0%. Values outside the range will be subject to the nearest limit. Note that not all browsers support the use of percentage values. The fourth parameter represents opacity and has a value between 0 and 1.

Example: design a form with a shaded border

XML/HTML Code copies content to the clipboard

RGBA Color input, textarea {/ * Unified input field style * / padding: 4px; border: solid 1px # E5E5E5; outline: 0; font: normal 13px sans-serif; width 100% Verdana, Tahoma, sans-serif; width: 200px; background: # FFFFFF; box-shadow: rgba (0,0,0.1) 0px 0px 8px / * Design border shadowing effect * /-moz-box-shadow: rgba (0,0,0,0.1) 0px 0px 8pxash * compatible with Mozilla-type browsers, such as FF*/-webkit-box-shadow: rgba (0,0,0,0.1) 0px 0px 8pxstroke * compatible with Webkit engines, such as Chrome and Safari*/} textarea {/ * define text area style * / width: 400px; max-width: 400px Height: 150px; line-height: 150%; background:url (images/form-shadow.png) no-repeat bottom right;} input:hover, textarea:hover, input:focus, textarea:focus {border-color: # C9C9C9;} / * Design the dynamic effects of the mouse * / label {/ * define the label style * / margin-left: 10px; color: # 999999; display:block / * display in blocks, achieve branch display * /} .submit input {/ * Design submit button style * / width:auto; padding: 9px 15px; background: # 617798; border: 0; font-size: 14px; color: # FFFFFF;} name

Mailbox

Personal web address

Leave a message

Demo effect:

The above is how to use CSS3RGBA color mode. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow 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.