zoukankan      html  css  js  c++  java
  • 切图技巧分享—圆角背景色

    一、设计稿

    要实现下面这样一个效果,本文重点说的是下面“自动续费,可随时取消”这部分的实现。

    我把问题简化一下,变成了

    二、解决问题的思路

    1、p标签加背景色

    一般,很容易想到用p标签实现,代码如下:

    <style type="text/css">
        .box {
            width: 154px;
            height: 90px;
            float: left;
            border: 1px solid #bfbfbf;
            border-radius: 8px;
            margin: 20px 9px 0 0;
            position: relative;
        }
    
        p {
            margin: 0;
            margin-top: 50px;
            color: #fd632b;
            background-color: #f7f7f7;
            font-size: 12px;
            text-align: center;
    
        }
    </style>
    <body>
    <div class="box">
        <p>自动续费,可随时取消</p>
    </div>
    </body>
    View Code

    但是会发现p的背景色是是矩形的,并不会按照父容器的border-radius来约束自己的背景色。会超出去如下。

    2、父元素overflow:hidden

    一般情况可以通过.box的overflow:hidden 让溢出部分不显示。

        .box {
            overflow:hidden;
        }
    <style type="text/css">
        .box {
            width: 154px;
            height: 90px;
            float: left;
            border: 1px solid #bfbfbf;
            border-radius: 8px;
            margin: 20px 9px 0 0;
            position: relative;
        overflow:hidden;
        }
    
        p {
            margin: 0;
            margin-top:74px;
            color: #fd632b;
            background-color: #f7f7f7;
            font-size: 12px;
            text-align: center;
    
        }
    </style>
    <body>
    <div class="box">
        <p>自动续费,可随时取消</p>
    </div>
    </body>
    View Code

    但是我的设计稿里有一个推荐的标签,我直接让父元素overflow:hidden了,那这个推荐标签也无法显示出来了。。

    <style type="text/css">
        .box {
            width: 154px;
            height: 90px;
            float: left;
            border: 1px solid #bfbfbf;
            border-radius: 8px;
            margin: 20px 9px 0 0;
            position: relative;
            overflow: hidden;
        }
    
        p {
            margin: 0;
            margin-top: 74px;
            color: #fd632b;
            background-color: #f7f7f7;
            font-size: 12px;
            text-align: center;
    
        }
        .label {
            position: absolute;
            top: -6px;
            left: 10px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
            font-style: normal;
            color: #fff;
            padding: 0 6px;
        }
    
        .label.rec {
            background-color: #fd632b;
        }
    </style>
    <body>
    <div class="box">
        <em class="label rec">推荐</em>
    
        <p>自动续费,可随时取消</p>
    </div>
    </body>
    View Code

    3、p加border-radius

    现在很容易想到,给p也加上一个border-radius。

        p {
        border-radius:0 0 8px 8px;
        }
    <style type="text/css">
        .box {
            width: 154px;
            height: 90px;
            float: left;
            border: 1px solid #bfbfbf;
            border-radius: 8px;
            margin: 20px 9px 0 0;
            position: relative;
        }
    
        p {
            margin: 0;
            margin-top: 74px;
            color: #fd632b;
            background-color: #f7f7f7;
            font-size: 12px;
            text-align: center;
        border-radius:0 0 8px 8px;
    
        }
        .label {
            position: absolute;
            top: -6px;
            left: 10px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
            font-style: normal;
            color: #fff;
            padding: 0 6px;
        }
    
        .label.rec {
            background-color: #fd632b;
        }
    </style>
    <body>
    <div class="box">
        <em class="label rec">推荐</em>
    
        <p>自动续费,可随时取消</p>
    </div>
    </body>
    View Code

    4、另一种思路

    也可以通过给父元素设置背景色来实现。

    <style type="text/css">
        .box {
            width: 154px;
            height: 90px;
            float: left;
            border: 1px solid #bfbfbf;
            border-radius: 8px;
            margin: 20px 9px 0 0;
            position: relative;
            background-color: #f7f7f7;
        }
    
        .other {
            height: 74px;
            background-color: #fff;
            border-radius: 8px 8px 0 0;
    
        }
    
        p {
            margin: 0;
            color: #fd632b;
    
            font-size: 12px;
            text-align: center;
            border-radius: 0 0 8px 8px;
    
        }
    
        .label {
            position: absolute;
            top: -6px;
            left: 10px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
            font-style: normal;
            color: #fff;
            padding: 0 6px;
        }
    
        .label.rec {
            background-color: #fd632b;
        }
    </style>
    <body>
    <div class="box">
        <em class="label rec">推荐</em>
        <div class="other"></div>
        <p>自动续费,可随时取消</p>
    </div>
    </body>

    虽然最后还是要设置border-radius,并不是最佳实践,但也是一种解决问题的思路。

    本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6728473.html有问题欢迎与我讨论,共同进步。

  • 相关阅读:
    8 shell五大运算
    android闹钟——原代码【转】
    draw9patch超详细教程【转】
    史上最全的动画效果 Android Animation 总汇 【转】
    Android 中的BroadCastReceiver【转】
    android屏幕适配【转】
    [Android实例] ViewPager多页面滑动切换以及动画效果【转】
    人脸数据库汇总 【转】
    Android闹钟程序周期循环提醒源码(AlarmManager)【转】
    android背景图片更换——经典例子【转】
  • 原文地址:https://www.cnblogs.com/starof/p/6728473.html
Copyright © 2011-2022 走看看