How CSS3 uses the border-radius property to make fillets
This article mainly shows you "CSS3 how to use border-radius attributes to make fillets", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn about "CSS3 how to use border-radius attributes to make fillets" this article.
Html
The code is as follows:
Log in to mailbox
Use the border-radius property to fillet
The code is as follows:
/ * CSS3.0 fillet attribute to realize the fillet of form elements * /
.loginbox {
Background:#edf6ff
Border-left:1px solid # acc3e3
Border-right:1px solid # acc3e3
Padding:20px
}
.loginbox h3 {
Color:#28456f
Font-size:14px
}
.loginbox ul {
Margin-top:10px
}
.loginbox li {
Margin-bottom:10px
List-style-type:none
}
.loginbox li input {
Border:1px solid # 9dadc6
Border-radius:6px
Height:32px
Padding:0 5px
Color:#888
Width:292px
}
.loginbox li input.account {
Width:182px
Border-right:1px solid # d5deed
Border-top-right-radius:0
Border-bottom-right-radius:0
Background:-moz-linear-gradient (top,#ddd 0% precinct eee 10% meme FF 20%)
Background:-webkit-linear-gradient (top,#ddd 0% precinct eee 10% meme FF 20%)
Background:-ms-linear-gradient (top,#ddd 0% precinct eee 10% meme FF 20%)
}
.loginbox li input.mail_btn {
Width:110px
Height:34px
Border-top-left-radius:0
Border-bottom-left-radius:0
Color:#504c4d
Text-align:left
Cursor:pointer
}
These are all the contents of the article "how CSS3 uses border-radius attributes to make rounded corners". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
