Home > Developer > Web Develop
Here are the results I performed with HTML+CSS, with the rounded corners of the pictures in different positions:
The corresponding code is as follows:
123<title>my First Text html</title>4<style type="Text/css">5 . yuanjiao{6 width:400px;7 height:100px;8text-Align:center;9 background: #33CC33;Tenborder-radius:15px; Onemargin-bottom:10px; A } - . yuanjiaozuoshang{ - width:400px; the height:100px; -text-Align:center; - background: #33CC33; -border-top-left-radius:15px; +margin-bottom:10px; - } + . yuanjiaoyoushang{ A width:400px; at height:100px; -text-Align:center; - background: #33CC33; -border-top-right-radius:15px; -margin-bottom:10px; - } in . yuanjiaozuoshangyouxia{ - width:400px; to height:100px; +text-Align:center; - background: #33CC33; theborder-radius:15px 0px; *margin-bottom:10px; $ }Panax Notoginseng</style> - the<body> +<divclass="Yuanjiao"> Rounded Corners </div> A<divclass="Yuanjiaozuoshang"> Top Left Fillet </div> the<divclass="Yuanjiaoyoushang"> Top Right corner </div> +<divclass="Yuanjiaozuoshangyouxia"> left upper right bottom corner </div> -</body> $Through the above code, we should have a preliminary understanding of the rules for defining the fillet, and I'll summarize the definition rules below:
One, for different browsers, CSS statements are different
1 -moz-border-radius:10px; /* Only Firefox support, achieve fillet effect */2-webkit-border-radius:10px; /* Only safari,chrome support, achieve fillet effect */3-khtml-border-radius:10px; /* Only safari,chrome support, achieve fillet effect */4 border-radius:10px; /* Only firefox,opera,safari,chrome support, achieve rounded effect */
For now, just set the following code at the same time
-moz-border-radius:10px;border-radius:10px; The/*border-radius must be placed in the final statement, otherwise it may fail */
Second, border-radius:10px; (fillet radius includes horizontal radius and vertical radius)
There are a total of four fillets: top left, upper right, lower left, which is the order in which we define the fillet radius.
1, only one value, is the definition of four fillet radius, such as: border-radius:10px;
2, there are two values, the first value is the definition of the upper left and bottom right, the second value is defined in the lower left and right, such as: border-radius:10px 15px;
3, there are three values, the first value is defined on the top left, the second value is defined on the bottom left and right, the third value is the definition of lower right, such as: border-radius:10px 15px 8px;
Iv. We can also define a rounded corner individually.
1, define the upper left fillet, border-top-left-radius:15px; or-moz-border-radius-topleft:10px;
2, define the upper right corner, border-top-right-radius:15px; or-moz-border-radius-topright:10px;
3, define the lower right round corner, border-bottom-right-radius:15px; or-moz-border-radius-bottomright:10px;
4, define the lower left round corner, border-bottom-left-radius:15px; or-moz-border-radius-bottomleft:10px;
We can also define the horizontal and vertical radii for the same or several fillets, respectively.
border-radius:10px (horizontal radius)/15px (vertical radius)
Getting Started with web design--How to use CSS to set rounded corners
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
