css如何实现圆角内凹效果


本文摘自PHP中文网,作者V,侵删。

实现思路:

(推荐教程:css快速入门)

两个并排的div,在第二个div内定义一个2倍宽高的名为item,对item进行设置border-radius: 50%,再对其进行绝对定位。

代码实现:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<head>

  <meta charset="UTF-8" />

  <title>Title</title>

  <style>

    .box {

      width: 50px;

      height: 50px;

      overflow: hidden;

      background: #655;

      text-align: center;

      position: relative;

      float: left;

    }

    .item {

      width: 100px;

      height: 100px;

      background: #fff;

      border-radius: 50%;

      position: absolute;

      top: -50px;

      left: 0;

    }

  </style>

</head>

<body>

  <div class="box"></div>

  <div class="box">

    <div class="item"></div>

  </div>

</body>

</html>

实现效果:

阅读剩余部分

相关阅读 >>

css怎么实现两张图片叠加在一起

input实现文字超出省略号(代码示例)

波浪的边框css怎么实现

css块级元素有可继承的属性吗?

一招搞定css元素五彩斑斓的背景

html怎么取消有序列表的序号

html怎么加载css

css中px是什么意思

css阴影怎么写

css样式中class是什么

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...