css3 border-radius_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:39

Original

1058 people have browsed it

The prefix corresponds to the browser

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

Prefix

Browser

-webkit

<style type="text/css">div.circle{    height:100px;/*与width设置一致*/    width:100px;    background:#9da;    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/    }div.same{    height:100px;    width:50px;    background:#9da;}.semi-circle{     border-radius:50px 0 0 50px;    }.test{    border-radius: 50% 0 0 50%;}   </style><body><div class="circle"></div><br/><div class="same semi-circle "></div><br/><div class="same test"></div></body>

Copy after login

chrome and safari

-moz

firefox

-ms

-o

opera

border-radius:

It can be seen that there is still a difference between setting a fixed value such as 50% and 50px. I have not studied what the percentage is as a reference, so now I don’t know how to set a left semicircle through the percentage.

Reference:

https://css-tricks.com/almanac/properties/b/border-radius/

Related labels：

css3 border-radius

source：php.cn

Previous article：Use

to make a secondary navigation. How to arrange the li in ul vertically_html/css_WEB-ITnose Next article：JavaScript - React to events Change HTML content Change HTML styles Write HTML output_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn