css3
吃葡萄不吐葡萄皮嘻嘻
。
展开
-
css3实现边框线渐变
<style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; position: relative; background: #000; margin: 100px auto; ..原创 2022-04-26 11:39:08 · 1619 阅读 · 0 评论 -
使用CSS3制作倒影——box-reflect
效果图如下: <style> h1 { font-size: 50px; text-align: center; color:slateblue; filter: hue-rotate(240deg); -webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgb原创 2021-12-29 10:31:49 · 577 阅读 · 0 评论 -
CSS linear-gradient() 函数
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。1.默认从上到下渐变 <style> #grad1 { width:300px; height: 200px;原创 2021-04-27 10:21:49 · 358 阅读 · 0 评论 -
calc() 函数的使用
1.任何长度值都可以使用calc()函数进行计算;2.calc()函数支持 “+”, “-”, “*”, “/” 运算;3.calc()函数使用标准的数学运算优先级规则;注意:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);...原创 2021-04-27 09:46:19 · 1163 阅读 · 0 评论 -
css属性box-shadow
box-shadow属性向box添加一个或多个阴影语法:box-shadow: offset-x offset-y blur spread color inset;box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];词解释:blur:模糊 spread:伸展 inset:内凹参数解释:offset-x:必需,取值正负都可。offset-x水平阴影的位置。2.offset-y:必需,取值正负都可。offset-y垂直阴影的位置。blur原创 2021-03-31 17:56:24 · 875 阅读 · 0 评论