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);
}
相关推荐
weixin_3993806914 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说35 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript
随笔记1 小时前
uniapp开发的小程序输入框在ios自动填充密码,如何欺骗苹果手机不让自动填充
前端·ios·app
bug爱好者2 小时前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina2 小时前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试