前端基础之CSS(8)(三角形,阴影, 气泡框)

152 阅读1分钟

三角形

宽高为0,给所有边框颜色为transparent(透明),
给需要方向的三角形一个边框颜色
image.png
.box{
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: aqua;
}
<div></div>

阴影

文字阴影

    text-shadow:(阴影可叠加,通过逗号分隔)
        水平偏移量
        垂直偏移量
        偏移程度
        阴影颜色      
image.png
    div {
      color: skyblue;
      text-shadow: 2px 2px 4px pink,
                   3px 3px 4px rgb(250, 195, 249);
    }
    <div> 送你一朵小红花 </div>

边框阴影

box-shadow:

user-select(可否选择文本)

none:用户不可选择文本
text:用户可以选择文本
all:选择一行
element:默认

resize(用户是否可以调整元素大小)

取值:
    vertical:默认,只能调节元素高度
    none:不可以调节元素大小
    both:可以调节元素宽高

text-overflow(文字溢出隐藏)

clip:溢出不处理
ellipsis:溢出内容显示省略号

气泡框

image.png

<style>
.gas {
  width: 300px;
  background-color: rgb(207, 236, 248);
  border-radius: 8px;
  color: rgb(239, 77, 77);
  padding: 6px;
  font-size: 12px;
  position: absolute;
  top: 38px;
  left: -14px;
  display: none;
  box-shadow: 3px 3px 10px pink;
}

.gas::before {
  content: '';
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-bottom-color: rgb(207, 236, 248);
  position: absolute;
  top: -42px;
}

.libox {
  position: relative;
  color: rgb(171, 171, 245);
}

.lb:hover .gas {
  display: block;
}
 <!-- 文本 -->
  <div class="text">《将进酒》是唐代大诗人
    <span class="libox">
      <span class="lb"><strong>李白</strong>
        <!-- 气泡框 -->
        <div class="gas"> 李白(701年2月28日—762年12月), 字太白,号青莲居士,
          祖籍陇西成纪(今甘肃省秦安县) ,出生于绵州昌隆县青莲乡。
        </div>
      </span>
    </span>
    沿用乐府古题创作的七言歌行。
  </div>