精华内容
下载资源
问答
  • 圆角边框

    2021-03-02 19:50:00
    css3实现圆角边框 方法/步骤1: 圆角边框(border-radius)的基本用法: 圆角边框的最基本用法就是设置四个相同弧度的圆角 boder-top-left-radius:30px; //左上角 boder-top-right-radius:30px; //右上角 boder-...

    css3实现圆角边框
    方法/步骤1:
    圆角边框(border-radius)的基本用法:

    圆角边框的最基本用法就是设置四个相同弧度的圆角

    boder-top-left-radius:30px; //左上角

    boder-top-right-radius:30px; //右上角

    boder-bottom-left-radius:30px; //右下角

    boder-bottom-right-radius:30px; //左下角

    如果这四个弧度的圆角相同,可以写成:

    border-radius:30px;

    例子:

    css部分:

    .div1{

    margin:0 auto;

    background: darkcyan;

    width:200px;

    height:200px;

    border:2px solid darkslategray;

    border-radius:30px;

    text-align: center;

    line-height: 200px;

    }
    在这里插入图片描述

    方法/步骤2:
    圆角边框也可以使用百分比作为单位,比如:将一个正方形的圆角边框设置为50%,那么就会形成一个圆,不过使用百分比与像素并不能等效。

    注意:百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半

    例子:

    css部分:

    .box1{

    width:200px;

    height:200px;

    margin: 30px auto;

    border: 2px solid #e4007e;

    text-align: center;

    line-height: 200px;

    font-weight: bold;

    font-size: 24px;

    background: burlywood;

    border-radius: 50%;//圆角百分比

    }

    html部分:

    这是一个圆
    :

    在这里插入图片描述

    方法/步骤3:
    既然使用圆角边框可以绘制出一个圆,同样也可以绘制出一个椭圆。

    例子:

    css部分:

    .box2{

    width:200px;

    height:300px;

    margin: 30px auto;

    border: 2px solid #e4007e;

    text-align: center;

    line-height: 200px;

    font-weight: bold;

    font-size: 24px;

    background: burlywood;

    border-radius: 100px/150px;

    }

    html部分:

    这是一个椭圆

    在这里插入图片描述

    方法/步骤4:
    设置不同弧度的圆角

    例子:

    css部分:

    #box4{

    width:500px;

    position: relative;

    margin:30px auto;

    }

    .div4,.div5,.div6,.div7{

    width:200px;

    height:200px;

    text-align: center;

    color:seagreen;

    font-size: 26px;

    line-height: 200px;

    background: yellowgreen;

    border:2px solid darkslategray;

    float:left;

    margin:20px;

    }

    .div4{border-top-left-radius: 40px;}

    .div5{border-top-right-radius: 20px;}

    .div6{border-bottom-left-radius: 30px;}

    .div7{border-bottom-right-radius: 10px;}

    HTML部分:

    左上角为圆角
    右上角为圆角
    右下角为圆角
    左下角为圆角
    在这里插入图片描述

    方法/步骤5:
    注意,上面例子中,每句圆角边框代码都要单独编写兼容代码。

    兼容性代码要这样写:

    .div4{

    border-top-left-radius: 40px;

    -moz-border-top-left-radius: 40px;

    -webkit-border-top-left-radius: 40px;

    }

    注意事项
    百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半

    展开全文
  • css圆角边框css圆角边框css圆角边框css圆角边框css圆角边框
  • 圆角边框属性 圆角边框画芒果

    圆角边框属性

    正方形+圆角边框属性 = 圆形(有弧度的图形)

    长方形+圆角边框属性 = 椭圆形(有弧度的图形)

    border-radius: 边框的弧度  px / % /em/rem
    
    border-right-top-radius: 右上角
    border-left-top-radius: 左上角
    
    
     <style>
        .box {
            width: 200px;
            height: 200px;background-color: red;
            /* border-radius: 20px; */
            /* 10px 左上和右下  30px 右上 左下 */
            /* border-radius: 10px 30px; */
            /* 30px 右上和左下 10px 左上  50px 右下 */
            /* border-radius: 10px 30px 50px; */
            /* 顺时针 */
            border-radius: 10px 20px 30px 40px;
        }
        
        </style>
    

    圆角边框画芒果案例

    在这里插入图片描述

      .box {
            width: 200px;
            height: 400px;background-color: #ffc107;
            /* border-radius: 20px; */
            /* 10px 左上和右下  30px 右上 左下 */
            /* border-radius: 10px 30px; */
            /* 30px 右上和左下 10px 左上  50px 右下 */
            /* border-radius: 10px 30px 50px; */
            /* 顺时针 */
            /* border-radius: 10px 20px 30px 40px; */
           border-radius:  151px 26px 160px 35px / 200px 62px 164px 35px;
          
           margin: 100px auto;
        }
    
    展开全文
  • 圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar圆角边框.rar
  • CSS 圆角边框

    万次阅读 2021-03-25 18:44:25
    CSS 圆角边框

    CSS 圆角边框

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的.CSS 很直观, 但显然不够...

    使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的.

    CSS 很直观, 但显然不够灵活, 导致页面设计中出现大量冗余代码. 不能使用变量和循环, 若想清除某个类型所有属性的值还需要一句一句的清除, 而不是一句完成. 而最令人痛心的莫过于现实圆角边框, 或许以下的代码是我们梦寐以求的:

    CSS Code复制内容到剪贴板

    .roundbox { round:3px; }/* 圆角大小为三像素 */

    奈何事与愿违, W3C 里面没有这样的东西. 某些浏览器支持一些特殊的属性可以实现类似功能, 但那并不能得到其他浏览器的支持. WordPress 后台就使用了这样的属性, Firefox 等一些浏览器上显示非常好看, 但 IE 上却惨不忍睹.

    为了实现小圆角, 各网站是各出奇招, 什么方法都有. 而我比较喜欢百度知道的实现办法, 因为零图片, 并且易于控制, 因为圆角部分是在 box 外部, 随时可以无害删除.

    百度知道的方法借用了 div 在 float:none 时占用全行的特性, 在 box 上方和下方各都放置几个 div, 并对这些 div 设置背景色, 边框和外边距. 也就是说, 我们只要固定了外层的宽度, 其他的就不需要操心了. 我模仿百度知道的样式做了一个例子, 效果可以参考一下右边的截图. 实现代码如下:

    CSS Code复制内容到剪贴板

    Cascading Style Sheets

    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc.

    其中有一点是很重要的, 记得为上下圆角所在的行添加 overflow:hidden 属性, 否则在 IE 中将会相当的恶心.

    圆角是实现了, 但并不是完美无瑕的, 边角有锯齿 (下面会介绍小圆角具体的方法可以消灭锯齿, 只要你不嫌麻烦). 为什么不能使用过渡颜色呢? 因为圆角所在的行只能控制背景和边框两处的颜色, 所以不能在同一行搞出比较复杂的颜色过渡. 因为颜色被限制了, 所以圆角的大小也被限制了 (有锯齿的圆角太大会显得很难看), 如果你的 box 有边线, 圆角大小建议不要超过 4 个像素, 如果没边线, 也不要超过 6 个像素. 有更大的圆角需要最好还是采用图片, 处理简单又方便.

    访问过腾讯问问的朋友可能会发现, 它的样式是抄袭百度知道的. 但你知道吗? 其实它的圆角效果是使用图片实现的. 有兴趣的朋友可以去研究一下.

    纯代码实现的小圆角

    以下是我个人的一点建议, 希望对你有帮助.

    什么时候使用纯代码制作圆角边框?

    你驱使代码的能力胜于图形.

    你追求更快的网页显示速度, 就算是微乎其微的差别.

    在模板或主题中使用.

    什么时候使用图片制作圆角边框?

    你驱使图形的能力胜于代码.

    你不在乎所差不几的网页显示速度, 更注重直观和维护方便.

    在文章或其它动态内容中使用.

    其实也很简单, 下面分析一下, 或许以后会有用.

    1. 做一个直角的 DIV, 给他画上边框. (以下图片都以左上角为例)

    1acdec0d26e245461924a6a7fd74f6d5.png

    2. 在 DIV 内部画第二个 DIV, 背景色与页面背景颜色相同.

    701dc97f3580f64d8c4a32108bcb45cc.png

    3. 将第二个 DIV 挪到边界上, 使它能与页面背景连接, 这样看上去就像一个缺角的框框.

    b0b3e5cdb1f0fafb4311971c39c00d79.png

    4. 在第二个 DIV 内画第三个 DIV, 在这里其实就是一点.

    eebee5f4d4c18d0a300a3ab681702da1.png

    5. 将第三个 DIV 挪到右下角的位置, Done.

    e5ef3bd641070db18f4be3541623ac2a.png

    主要步骤讲解了以后来看一个完整的例子:

    CSS Code复制内容到剪贴板

    html PUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    纯 CSS 打造圆角
    Hello, World!

    最终效果如下图所示:

    984362f93bcdbaa9101996360962cd28.png

    展开全文
  • div圆角边框的css写法内容导读:大家可以把本文的css代码加到div的样式表里面就行了,至于圆角的弧度等可以自己修改,另外也可以单独设置四个角的某两个角,总之大家灵活运用吧。有朋友看到沐风工作室网站首页上有个...
  • 首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角...
  • 这次给大家带来border-radius怎样给元素添加圆角边框,给border-radius元素添加圆角边框的注意事项有哪些,下面就是实战案例,一起来看一下。border-radius:10px; /* 所有角都使用半径为10px的圆角 */border-radius:...
  • 圆角边框.html

    2012-02-19 21:09:53
    圆角边框
  • css3实现圆角边框

    2020-03-21 15:42:47
    css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果
  • 纯css实现的圆角边框效果代码
  • 主要介绍了css3圆角边框和边框阴影示例,需要的朋友可以参考下
  • CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角。先说第一种,利用CSS3,前提是您的浏览器必须支持CSS3,Firefox3是支持的...
  • CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角。先说第一种,利用CSS3,前提是您的浏览器必须支持CSS3,Firefox3是支持的...
  • jquery实现圆角边框

    2011-01-29 08:27:05
    jquery实现圆角边框 圆角边框 jquery实现圆角边框 圆角边框
  • NiftyCube——轻松实现圆角边框
  • shape圆角边框,搜索框圆角边框

    千次阅读 2018-10-09 15:43:57
    搜索圆角边框: 在drawable文件夹下创建xml文件,  根布局设置&lt;shape&gt; &lt;shape android:shape="rectangle" xmlns:android="...g..
  • div css圆角代码各种圆角表格_圆角边框css圆角
  • JavaFx圆角边框

    千次阅读 2018-07-28 11:11:22
    我的JavaFx程序使用FXML+Css布局 ...我本以为圆角边框和Css一样使用 -fx-border-radius: 10px; 就可以了,然而并不是,是下面这样的 -fx-background-radius: 10px; 这才是正确的圆角边框的写法...
  • 主要介绍了Android布局实现圆角边框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了flutter Container容器实现圆角边框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,783
精华内容 18,713
关键字:

圆角边框