CSS实现底部弧度效果--卡片样式

html-css09

CSS实现底部弧度效果--卡片样式,第1张

使用了 CSS 的一些属性:

:after 伪类

position 定位

border-radius 圆角边框

linear-gradient 背景颜色渐变

display: flex flex 布局

box-shadow 盒子阴影

1.可以直接使用border-radius:0 0 15px 15px这些数据中,依次为顶部左角,顶部右角,底部右角,底部左角。示例一下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .test{

            width:100px

            height:100px

            background:#cecece

            border-radius:0 0 15px 15px

        }

    </style>

</head>

<body>

    <div class="test">

        

    </div>

</body>

</html>

效果如下:

2.可以分别使用border-bottom-left-radius:15pxborder-bottom-right-radius:15px具有同样效果.

给div加个样式,设置-webkit-border-radius,-moz-border-radius,border-radius,就可以实现圆角了,但是有一个问题就是IE8及一下是没有效果的