CSS学习摘记

最新推荐文章于 2025-08-06 09:13:47 发布

Wilsom

最新推荐文章于 2025-08-06 09:13:47 发布

阅读量576

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css border class div url c

本文链接：https://blog.youkuaiyun.com/lijiacumt/article/details/7452436

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS中的background属性、字符串自动显示省略号的方法、冒泡框制作、子元素选择等核心内容，突出展示了CSS在网页布局中的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、background属性：

{
	background:white url(app/arrow_collapse.png) no-repeat 93% 50%;
	background-size: 18px 12px
}

93%是背景图片位于此元素x轴位置，50%是位于y轴位置。

background-size是CSS3特性。
2、字符串超过容器长度自动显示省略号：

{
	white-space: nowrap;
	text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        width:100%;
	overflow:hidden;}

3、CSS制作冒泡框

<div class="bubble">Hello!How are you?</div>

.bubble{
    position:relative;
    left:50px;
    top:150px;
    height:50px;
    width:100px;
    background:#f3961c;
    border:gray solid 1px;
    border-radius:10px;
    padding:15px;
}
.bubble:after { 
content:"";
display:block; /* 针对 FF3.0 */ 
position:absolute; 
z-index:10; 
bottom:-30px; 
left:80px; 
width:0; 
height:0; 
border-width:15px 15px; 
border-style:solid; 
border-color:#f3961c transparent transparent; 
}

效果：