零基础学做网站培训介绍

当前位置:

CSS怎么控制DIV一边圆角一边直角

论坛老师好,我不是你们的学员,但请教你们一个问题,我想做一个按钮,左边二个角是圆角,右边二个角是直角,请问怎么写出这样的效果呢?麻烦论坛老师在百忙之中给我回答一下,多谢。

你好!控制DIV一边圆角一边直角可以通过CSS来控制,通过CSS的border-radius属性来控制圆角。border-radius属性可以单独的设置四个解单独的样式。如下图:

代码写法如下:


<style>.div{background:red;width:200px;height:40px;border-top-left-radius:20px;border-bottom-left-radius:20px;}</style>
<div class="div"></div>

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 很多细心的学员发现学做网站论坛的导航的背景图片每个角都是圆形的,而不是普通的直角,这就是由于我们在写DIV+CSS样式时,将网站导航的DIV的边框设置
  • 论坛老师好,我不是你们的学员,但请教你们一个问题,我想做一个按钮,左边二个角是圆角,右边二个角是直角,请问怎么写出这样的效果呢?麻烦论坛