How to use CSS3RGBA color mode
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.
