zoukankan      html  css  js  c++  java
  • JavaEE——css边框样式

    声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

    边框样式

    border属性可以用于控制标签的边框样式,边框的尺寸使用px为单位。
    常用的边框的线条样式:
    solid 实线
    none 无边框线
    double 双线
    dashed 虚线
    代码示例:

    image

    运行结果:

    image

    思维导图:

    image

    边框可以根据上下左右来控制:
    border-top 上边框
    border-bottom 下边框
    border-left 左边框
    border-right 右边框
    代码示例:

    image

    运行结果:

    image

    思维导图:

    image

    边框还可以调整四角的弧度:
    border-radius 调整边框的弧度,单位可以用px和%
    把照片的边框调整成圆形示例:

    image

    运行结果:

    image

    调整文本框弧度示例:

    image

    运行结果:

    image

    还可以针对四角来调整弧度:
    border-bottom-left-radius 调整左下角的弧度
    border-bottom-right-radius 调整右下角的弧度
    border-top-right-radius 调整右上角的弧度
    border-top-left-radius 调整右下角的弧度

    代码示例:

    image

    运行结果:

    image

    调整组件的阴影:
    box-shadow可以调整组件的阴影面积,也可以设置阴影的颜色:
    代码示例:

    image

    运行结果:

    image

    前两个数值设置为0,就能实现类似光晕的效果: 代码示例:

    image

    运行结果:

    image

    图片边框:border-image
    使用此属性可以将图片设置到边框上,末尾可以使用round或stretch来定义图片围绕或是拉伸效果。
    代码示例:

    image

    运行结果:

    image

    代码示例:

    image

    运行结果:

    image

  • 相关阅读:
    Linux下安装Readis
    windows下的Redis安装:
    解决@ResponseBody不能和 <mvc:annotation-driven>同时使用的问题
    dom4j操作XML
    Ajax优缺点
    来一打前端博客压压惊
    tinypng upload一键压缩上传工具,告别人肉
    手把手教你撸一个简易的 webpack
    前端路由简介以及vue-router实现原理
    JS 数据类型、赋值、深拷贝和浅拷贝
  • 原文地址:https://www.cnblogs.com/kaigexuetang/p/7640947.html
Copyright © 2011-2022 走看看