Home >Web Front-end >HTML Tutorial >html button problem_html/css_WEB-ITnose
html button problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:10:092214browse
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body><input type="button" value="next" style="color:#FFFFFF;background-color:#0065CA;font-family:BorderWebBOLD;font-size: 15px;Font-Weight:bold;" onClick="btnApply()"> </body></html>
I want to set this button, but the shape of the button is rectangular. I need the button to be arc-shaped on both sides. At the same time, I don’t want to insert a button image to achieve it. What are the attributes? Or is there a way to reach the buttons with half arcs on both sides?
Find the solution! Thanks!
Reply to the discussion (solution)
Standard CSS2 cannot make rounded corners
Unless you add a lot of elements to simulate it, then this It is better to add a picture to save trouble
Pure CSS actual button, rounded corners, three-dimensional effect
Design a semi-arc btn_bg.gif transparent background image on both sides
.btn{
width:**px; height:**px;
background:url(btn_bg.gif) no-repeat;
}
75ec05929d958ea373081a6c377f5140
CSS3 attribute border-radius: 3px 4px 5px 6px; Only some browsers support it (standard browsers and IE9 or above).
Pure CSS actual button, rounded corners, three-dimensional effect
111
Statement：
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
Previous article：How to jump to the page?_html/css_WEB-ITnoseNext article：How to jump to the page?_html/css_WEB-ITnose