css3圆角边框-渐变-(十九)

25 篇文章 0 订阅
22 篇文章 0 订阅

css3新增样式

border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;border-radius: top-left top-right bottom-right bottom-left
/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

1.border-radius 圆角边框,给盒子添加边角.

border-radius: 50%
;      指对应盒子宽度高度的50%;

border-radius: 4px;       指边框左上  右上  右下 左下四个角弧度为                             4px       

用法和边框属性一样,可以四角分别设置.

下面是复合写法与单例写法:

复合写法:
border-radius: 2em;
单例写法:
border-top-left-radius: 2em;   上左圆角边框;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;  

复合写法1-4个值对应:

  • 一个值: 左上右上左下右下
  • 两个值: 左上右下 右上左下
  • 三个值:左上 右上左下 右下
  • 四个值:左上 右上 右下 左下

2.box-shadow 边框阴影,也可以用来做叠加,给盒子添加阴影效果.

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 22px -10px 10px 0 #cc insert;
          第一个值: x偏移量;
          第二个值: y偏移量;
          第三个值: 模糊半径;
          第四个值: 扩展半径;
          第五个值: 阴影颜色;
          第六个值: 阴影模式{向内/向外};
          
参数描述
h-shadow必需的。水平阴影的位置。允许负值阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边
v-shadow必需的。垂直阴影的位置。允许负值阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部
blur可选。模糊距离此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊
spread可选。阴影的大小此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小
color可选。阴影的颜色。rgba hex rgb此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数
inset可选。从外层的阴影(开始时)改变阴影内侧阴影此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影

box-shadius的属性值 可以叠加,就是一个属性可以设置多个值,用逗号分隔

box-shadow: h-shadow v-shadow blur spread color inset,
            h-shadow v-shadow blur spread color inset;


3.渐变色,可以让你在两个或多个颜色之间显示平稳的过渡.

css3的渐变类型:

  • 线性渐变(linear gradients)
  • 径向渐变(radial gradients)

线性渐变_____________________

background-image: linear-gradient(#e66465, #9198e5);
                           从上到下渐变(默认情况)
background-image: linear-gradient(to right, red, green);
                           从左到右
background-image: linear-gradient(to bottom right, red, blue);
                          从左上到右下;
backgroun-image: linear-gradient(-90deg, red, blue);
                          从任意角度渐变

这里任意角度-90deg表示将创建一个从右到左的渐变,角度是指水平线和渐变线之间的角度.

但是,请注意很多浏览器都使用的是老的旧标准,即0deg将创建一个从左到右的渐变,90deg将创建一个从上到下的渐变.公式为90 - x = y 其中 x 为标准角度,y为非标准角度。

img

多种颜色

background-image: linear-gradient(to right, red, blue, orange, yellow, green, blue, indigo, violet);

使用透明度

   ~~~

background-image: linear-greadient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
~~~

重复线性渐变

background-image: linear-gredient(circle, red, yellow 10%, green 20%);

径向渐变_________________

中心向外扩展.

background-image: radial-gradient(shape, size, at posiition, start-color, ...,  last-color);
   注:shape 形状     circle圆形     ellipse 椭圆形    默认是椭圆

示例:

background-image: radial-gradient(red, green, yellow);
                    默认渐变
background-image: radial-gradient(red 5%, yellow 10%, green 10%);               按照比例渐变

background-image: radial-gradient(circle, red, yellow, green);             按照形状渐变,默认是椭圆

background-image: repeating-radial-gradient(red, yellow 10%, 	green 15%);         重复渐变
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我以为自己很帅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值