text-shadow,background-origin,background-size,background-clip

本文深入探讨了CSS中的text-shadow属性用于设置文本阴影效果,包括x-offset、y-offset、blur和color参数的详细解释,并通过实例展示了如何应用这些属性。此外,还介绍了background-origin和background-clip属性的作用,如何通过它们调整背景图片的显示范围,以及background-size属性如何控制背景图片的大小。文章旨在帮助开发者掌握CSS布局中的关键技巧。
1.text-shadow可以用来设置文本的阴影效果。
语法:
text-shadow:x-offset y-offset blur color;

X-offset:标示阴影的水平偏移距离,其值为正值时阴影想右偏移,反之像左偏移;

Y-offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

Color:是指阴影的颜色,其可以使用rgba色。

如:
text-shadow:0 1px 1px #fff;

<style type="text/css">
.demo {
    width: 340px;
    padding: 30px;
    font: bold 55px/100% "微软雅黑";
    background: #C5DFF8;
    text-shadow: 2px 2px 0 red;
}
</style>  

<div class="demo">IMOOC</div>


2.background-origin设置元素背景图片的原起始位置。

background-origin:border-box|padding-box|content-box;
参数分别表示背景图片是从边框,还是内边框(默认值),或者是内容区域开始显示。
需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。


 background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;


3.background-clip用来将背景图片做适当的裁剪以适应实际需要。
语法:
background-clip:border-box|padding-box|content-box|no-clip
参数分别表示从边框,或内填充,或内容区域,向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。
background-clip默认值为border-box.




4.background-size设置背景图片的大小,以长度值或百分比显示,还可以通过,cover和contain来对图片进行伸缩。
语法:

background-size:auto|<长度值>|<百分比>|cover|contain
取值说明:
1.auto:默认值,不改变背景图片的原始高度和宽度;
2.<长度值>:成对出现如200px,50px,强背景图片宽度依次设置为前面俩个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3.<百分比>:0%-100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘前面百分比得出的数值,当设置一个值时同上;
4.cover:顾名思义为覆盖,即将背景图片等比缩放一填满整个容器;
5.contain:容纳,即将背景图片等比缩放放置在一边紧贴容器边缘为止。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SPEED主题视频合成器</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: &#39;Arial Rounded MT Bold&#39;, &#39;Arial&#39;, sans-serif; } body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; min-height: 100vh; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 30px; padding: 20px; background: rgba(0, 0, 0, 0.3); border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } h1 { font-size: 2.8rem; margin-bottom: 10px; background: linear-gradient(90deg, #ff6b6b, #ffa86b, #ffda6b, #6bff9e, #6bc7ff, #9d6bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 15px rgba(255, 255, 255, 0.2); } .subtitle { font-size: 1.2rem; color: #a0a0dd; margin-bottom: 20px; } .video-container { position: relative; width: 100%; height: 450px; margin-bottom: 30px; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); } .video-display { width: 100%; height: 100%; background: linear-gradient(45deg, #0f3460, #1a1a2e); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .current-image { width: 80%; height: 80%; background: linear-gradient(45deg, #ff6b6b, #6bc7ff); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: bold; position: relative; z-index: 2; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); transition: transform 0.5s ease; } .speed-lines { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .line { position: absolute; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.6); transform-origin: left; animation: speedLine 1.5s linear infinite; } @keyframes speedLine { 0% { transform: translateX(-100%) scaleX(0); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translateX(100%) scaleX(1); opacity: 0; } } .controls { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; } .btn { padding: 12px 25px; border: none; border-radius: 50px; background: linear-gradient(90deg, #ff6b6b, #ffa86b); color: white; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); } .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); } .btn:active { transform: translateY(1px); } .btn-play { background: linear-gradient(90deg, #6bff9e, #6bc7ff); box-shadow: 0 5px 15px rgba(107, 255, 158, 0.4); } .btn-play:hover { box-shadow: 0 8px 20px rgba(107, 255, 158, 0.6); } .btn-pause { background: linear-gradient(90deg, #ffda6b, #ffa86b); box-shadow: 0 5px 15px rgba(255, 218, 107, 0.4); } .btn-pause:hover { box-shadow: 0 8px 20px rgba(255, 218, 107, 0.6); } .image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .image-card { background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .image-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .card-color { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .card-content { padding: 15px; } .card-title { font-size: 1.2rem; margin-bottom: 10px; color: #ffda6b; } .card-text { color: #a0a0dd; font-size: 0.9rem; } .footer { text-align: center; padding: 20px; margin-top: 30px; color: #6bc7ff; font-size: 0.9rem; } /* 响应式设计 */ @media (max-width: 768px) { h1 { font-size: 2.2rem; } .video-container { height: 350px; } .controls { flex-wrap: wrap; } } </style> </head> <body> <div class="container"> <header> <h1>SPEED主题视频合成器</h1> <p class="subtitle">将多张卡通风格SPEED主题图片合成为动态视频</p> </header> <div class="video-container"> <div class="video-display"> <div class="current-image">SPEED</div> <div class="speed-lines" id="speedLines"></div> </div> </div> <div class="controls"> <button class="btn btn-play" id="playBtn">播放视频</button> <button class="btn btn-pause" id="pauseBtn">暂停</button> <button class="btn" id="speedUpBtn"
09-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值