zoukankan      html  css  js  c++  java
  • [推荐]制作div+css圆角


    “尽量不要圆角,需要切图”“这样设计代码不好实现”云云,昨天在网上看到一个只用代码就可以设计出圆角的效果,~ 和大家一起分享~

    首先看样式表文件:
    .b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
    .b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
    border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
    .b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
    border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
    .b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
    border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}

    接着看页面代码:
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
    当然你也可以用其他的标签<div>或者<span><a>之类,应该也是可以的

    在上面两句之间加上一个左右border的content
    这就是效果了:
  • 相关阅读:
    Lightoj 1422
    BZOJ 1801 [AHOI 2009] 中国象棋(DP)
    [SCOI2008]天平
    [SCOI2008]奖励关
    [USACO08JAN]haybale猜测Haybale Guessing
    [Sdoi2016]征途
    [SHOI2014]概率充电器
    [USACO08JAN]电话线Telephone Lines
    [HEOI2016]排序
    友好的生物
  • 原文地址:https://www.cnblogs.com/mokliu/p/2138204.html
Copyright © 2011-2022 走看看