css背景从上到下颜色渐变、css背景从左到右颜色渐变、 css框线展示外阴影、css框线展示内阴影

1. css背景从上到下颜色渐变

java 复制代码
body {
   background: linear-gradient(to bottom, #ff0000, #ffff00); 
   /* 这里的#ff0000表示红色,#ffff00表示黄色 */
}

2. css背景从左到右颜色渐变

要实现CSS背景从左到右的颜色渐变,可以使用linear-gradient函数。以下是一个简单的例子,它创建了从左(红色)到右(蓝色)的水平渐变背景:

java 复制代码
.gradient-background {
  background-image: linear-gradient(to right, red, blue);
  }

3. css框线展示外阴影

在CSS中,您可以使用box-shadow属性为元素添加外阴影。该属性允许您指定阴影的X偏移、Y偏移、模糊半径、扩散半径以及颜色。

java 复制代码
.div-with-shadow {
/* 语法: box-shadow: [水平X偏移] [垂直Y偏移] [模糊半径] [扩散半径] [颜色]; */
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

4. css框线展示内阴影

重点:在CSS中,您可以使用box-shadow属性来为元素展示内阴影。该属性允许您设置水平阴影的位置、垂直阴影的位置、模糊距离、阴影的扩散范围和阴影颜色。

注意 :要创建内阴影,请将inset关键字添加到阴影的偏移量中。没有inset关键字的阴影被视为外阴影。

java 复制代码
/* 语法: box-shadow: inset  [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色]; */
.box {
  /* 添加内阴影 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
相关推荐
吴永琦(桂林电子科技大学)25 分钟前
HTML5
前端·html·html5
爱因斯坦乐28 分钟前
【HTML】纯前端网页小游戏-戳破彩泡
前端·javascript·html
恋猫de小郭33 分钟前
注意,暂时不要升级 MacOS ,Flutter/RN 等构建 ipa 可能会因 「ITMS-90048」This bundle is invalid 被拒绝
android·前端·flutter
大莲芒4 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木6 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning217 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一8 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla8 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡8 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu8 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css