css阴影效果

来源：互联网发布：免费三级域名申请编辑：程序博客网时间：2024/06/05 15:04

css阴影效果

基本用法：

box-shadow:inset(指定为内阴影) 2px（x-坐标值） 2px（y-坐标值） 5px（阴影程度） 10px（阴影扩展长度） #aaa（阴影颜色）

还有多重阴影，
box-shadow:inset(指定为内阴影) 2px（x-坐标值） 2px（y-坐标值） 5px（阴影程度） 10px（阴影扩展长度） #aaa（阴影颜色）;
inset(指定为内阴影) 2px（x-坐标值） 2px（y-坐标值） 5px（阴影程度） 10px（阴影扩展长度） #aaa（阴影颜色）;
inset(指定为内阴影) 2px（x-坐标值） 2px（y-坐标值） 5px（阴影程度） 10px（阴影扩展长度） #aaa（阴影颜色）;

卡片阴影

<!DOCTYPE html><html><head><meta charset="utf-8"> <style>div.card {  width: 300px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  text-align: center;}div.header {    background-color: #4CAF50;    color: white;    padding: 10px;    font-size: 40px;}div.container {    padding: 10px;}</style></head><body><h2>卡片</h2><p>box-shadow 属性用来可以创建纸质样式卡片:</p><div class="card">  <div class="header">    <h1>1</h1>  </div>  <div class="container">    <p>January 1, 2016</p>  </div></div></body></html>

文字溢出

<!DOCTYPE html><html><head><meta charset="utf-8"> <style> div.test{    white-space:nowrap;     width:18em;     overflow:hidden;     border:1px solid #000;}</style></head><body><p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p><p>div 使用 &quot;text-overflow:ellipsis&quot;:</p><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><p>div 使用 &quot;text-overflow:clip&quot;:</p><div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div></body></html>

0 0