CSS Note 2.4 其他常用元素

最新推荐文章于 2025-09-08 13:32:29 发布

原创最新推荐文章于 2025-09-08 13:32:29 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#opacity #outline

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细解析了CSS中关于div元素的样式设定，包括透明度的两种实现方式：使用opacity属性和rgba颜色模式，以及如何设置鼠标样式和元素轮廓。同时，文章对比了rem和em单位的区别，并列举了display属性的常见值及其效果。

一、CSS

@charset "UTF-8";
div{
    margin: 10px;
}

#div1{
    background-color:rgb(255,0,0);
    width: 240px;
    height: 120px;
    opacity:0.6 ;/*opacity会作用于内容和元素，而rgba的透明度则只作用于元素*/
}
#div2{
    width: 240px;
    height: 120px;
    background-color: rgba(255 ,0 ,0, 0.6);
    cursor: wait;/*设置鼠标样式*/
    outline: green 2px solid;/*轮廓*/
}

/*备注：
rem：相对于根元素为基准
em：相对于父元素为基准
display常用值：
none 元素会被隐藏
block显示为块元素，可以换行和设置宽高
inline行内元素，大小自适应，不可换行
inline-block可以设置大小，不可换行
*/

二、效果展示

/*鼠标样式没有截出来*/