你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
weifengsn

纯CSS实现,HTML元素越少越好,大家有什么想法 9个回复 专栏 @ CSS

weifengsn 发布于 3 年前

突然冒出的一个想法,如何使用更少的HTML元素实现如下的样式呢,当然,一个IMG标签或者一个background:url()也可以,我想知道的是不是还有更多的办法,我目前使用的是一种办法,只使用了一个DIV,先看看大家的想法,过阵子再把我的代码贴上了。

另外还有下面的效果如何实现:

  • q545244819

    先贴下我写的 demo : 第一个 第二个

    就一个div然后用伪元素就可以实现了。

    #1
  • Tiramisusie

    第二个问题可以用 border-radius 来实现。

    .red {
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 40px / 20px;
    }
    
    #2
  • weifengsn

    @q545244819 第一个你用了三个div,第二个实现不错啊,我是用的二楼的方法

    #3
  • weifengsn

    @Tiramisusie 跟我想得一样啊

    #4
  • weifengsn

    http://sunweifeng.com/demo/outline.html

    附上我的实现方式

    #5
  • jmouse

    伪类是大大的好,以前实现一个效果,可能就两三中方式,现在多的去了,全是技巧型

    #6
  • tabooc

    写了好几年,也没用过outline

    #7
  • linxz
    • -moz-border-colors 多边框 FF私有
    • background-image: gradient.......... 渐变
    • background-image: url(...) 直接图片
    • :after & :before 伪元素

    目前想到的就这样……单标签元素基本上还是不太现实,
    可利用的基本上是有 outlinemarginborderpaddingwidth以及height来控制,说白了就是盒模型的一些东西,如果用上伪元素的话,那就是妥妥的没任何问题了。

    另外一个东西,想柱形一样的图形,那个必然是border-radius的事情,除非你想用gradient来复杂化……border-radius有一个 / 可以帮你实现更多效果……

    #8
  • dfmily27

    第一个div设置outline 好像是这个。不知道有没有写错。。
    第二个就是border-radius了。

    #9
登录后回复,如无账号,请使用邀请码注册