zoukankan      html  css  js  c++  java
  • 09.圆角样式及渐变色样式

    通过前面内容的学习,我们清楚,块级元素展示时,默认为矩形, 但这种方方正正的样式,有时候不满足我们在WEB页面上的布局需求, 所以今天来讲一下圆角样式

    所谓的圆角样式: (border-radius)  是W3C制定出来, 使默认显示为矩形的块元素展示一个弧形边缘的样式;

    圆角样式有如下几个特性:

    --> 可独立设置四个角的圆角半径;

    --> 从左上角开始,顺时针方向分别对应1,2,3,4,号参数;

    --> 圆角样式可分别设置各个角的X轴半径和Y轴半径, X,Y轴数据用 / 分开, X,Y轴各自独立设置,

    --> 圆角样式设置后,只影响对应角的样式,不影响其它角的样式;(即使所设置的圆角半径已经覆盖到了其它角的位置,也不会影响)

         (即: 每个角的X轴圆角半径<=元素宽度,Y轴圆角半径<=元素的高度)

    --> 圆角样式各参数值也可使用百分比进行设置, 百分比的基数为元素的宽度(X轴基数)和高度(Y轴基数)

    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    => 渐变样式: 指在元素的背景图层中,添加多种不同颜色之间的过渡效果的样式;

    --> 渐变样式应用为背景图片层,在背景颜色层之上, 

    --> 渐变样式的分类:  线性渐变(linear-gradient)、径向渐变(radial-gradient)

    --> 注意区分 重复渐变色 和 背景图片平铺的区别

    线性渐变效果

    径向渐变效果

    关于背景平铺效果与重复渐变色效果

  • 相关阅读:
    纷享销客公司产品能力学习笔记
    有质量的两道面试题
    java项目启动时执行指定方法
    css银行卡号样式
    swiper6使用鼠标滚轮失效退回swiper4即可
    vue-swiper Demo
    vue点击下载图片
    跨域请求发送数据在body里,java后台接收
    跨域,跨服务session获取不到,前后台不会传输Cookie,sessionId不一致
    Windows下 redis命令及配置
  • 原文地址:https://www.cnblogs.com/jieling/p/10876236.html
Copyright © 2011-2022 走看看