Comments (1)
函数列表
Function | Description |
---|---|
rgba() | Defines colors using the Red-Green-Blue-Alpha model (RGBA) |
rgb() | Defines colors using the Red-Green-Blue model (RGB) |
attr() | Returns the value of an attribute of the selected element |
calc() | Allows you to perform calculations to determine CSS property values |
cubic-bezier() | Defines a Cubic Bezier curve |
linear-gradient() | Sets a linear gradient as the background image. Define at least two colors (default: top to bottom) |
radial-gradient() | Sets a radial gradient as the background image. Define at least two colors (center to edges) |
hsl() | Defines colors using the Hue-Saturation-Lightness model (HSL) |
hsla() | Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA) |
Rarely Used | ... |
---|---|
var() | Inserts the value of a custom property |
repeating-linear-gradient() | Repeats a linear gradient |
repeating-radial-gradient() | Repeats a radial gradient |
样例
rgba 定义带opacity的rgb颜色
rgba(red, green, blue, alpha)
#p1 {background-color:rgba(255,0,0,0.3);} /* red with opacity*/
<p id="p1">Red</p>
attr() 获取本元素的某个属性
a:after {
content: " (" attr(href) ")";
}
<a href="http://vno.io">VNO's</a>
calc()
width: calc(100% - 100px);
cubic-bezier
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover {
width:300px;
}
<div></div>
linear-gradient(direction, color-stop1, color-stop2, ...)
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
div {
height: 50px;
}
#grad1 {
background-image: linear-gradient(red, yellow, blue);
}
#grad2 {
background-image: linear-gradient( 45deg, red, yellow, blue);
}
<div id="grad1"></div>
<div id="grad2"></div>
radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
参数
- shape: 默认为
ellipsis
, 另一个值为circle
- size: farthest-corner (default) closest-side closest-corner farthest-side
- position:
<div id="grad1"></div>
#grad1 {
height: 150px;
width: 200px;
background-image: radial-gradient(circle, red, yellow, green);
}
var()
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
from blog.
Related Issues (20)
- HTML: JS: meta-viewport HOT 1
- JS: snake case & camel case HOT 1
- Docker: WordPress, Nginx HOT 2
- Nuxt: [BABEL] Note: The code generator has deoptimised the styling of XXX.js as it exceeds the max of 500KB. HOT 1
- Nginx: Tips HOT 2
- Shell: Tips HOT 1
- Nacos: Tips HOT 2
- Xnix: LVM: Tips
- OS: Ubuntu: apt HOT 1
- OS: Ubuntu: xclip HOT 3
- OS: Ubuntu: user HOT 1
- OS:Ubuntu: Nvidia GPU HOT 5
- OS: Ubuntu: CUDA
- OS:Ubuntu:zshconfig
- Web: blogs
- Network: tools: curl
- PL: node.js: egg.js HOT 2
- FFMPEG: ProRes HOT 1
- Networking: 阿里云: 云解析DNS HOT 3
- Shell: scripts HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.