Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How CSS3 uses the border-radius property to make fillets

2025-04-06 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

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!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report