<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    div {

        position: relative;

        left: 50px;

        top: 50px;

        margin: 10px;

        width: 500px;

        height: 100px;

        border: 1px solid #E3581D;

    }

    .border {

        position: absolute;

        padding: 5px;

        border-style: solid;

        border-color: #E3581D;

    }

    .row1 {

        border-width: 5px 0 0 5px;

        top: -5px;

        left: -5px;

        border-radius: 4px 0 0 0;

    }

    .row2 {

        border-width: 5px 5px 0 0;

        top: -5px;

        right: -5px;

    }

    .col1 {

        border-width: 0 0 5px 5px;

        bottom: -5px;

        left: -5px;

    }

    .col2 {

        border-width: 0 5px 5px 0;

        bottom: -5px;

        right: -5px;

    }

    </style>

</head>

<body>

    <div>

        <span class="border row1"></span>

        <span class="border row2"></span>

        <span class="border col1"></span>

        <span class="border col2"></span>

    </div>

</body>

</html>

css 四周边框角加粗效果的更多相关文章

  1. NGUI的字体加粗效果

    ngui的UILabel可以通过属性面板(inspector)设置字体的样式:加粗 倾斜 正常等. 但是如果通过这里设置了加粗,与实际的加粗不一样,ngui有一个拉伸宽度的变化. 这让人觉得很丑 .如 ...

  2. 运用CSS高斯模糊添加图片加载效果

    <!DOCTYPE html> <html> <head> <title>大图片加载从模糊到清晰</title> </head> ...

  3. CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框

    本文将通过一个实际的业务需求,讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题: 在文字展示的时候,利用了 font-weig ...

  4. word中几个好用的宏代码（立方米上标、关闭样式自动更新、删除无效样式、表格加粗边框、宋体引号）

    Sub 替换立方米() With Selection.Find .Text = "m3" .Replacement.Text = "mm3" .Forward ...

  5. html字体加粗标签与写法

    在html中字体加粗的标签为<b>标签,当我们使用了该标签,字体就会加粗,一般用于注明重要信息,强调文字上面写法如下 字体加粗:<b>这里的字体就会加粗</b> 效 ...

  6. jquery 页面加载效果

    30个jquery 页面加载效果 30个jquery 页面加载效果   30 CSS Page Preload Animations   加载效果列表 Square Animations Demo 1 ...

  7. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  8. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  9. php原生PHPExcel插件导表（附表格合并，加粗居中及加边框换行操作）

    PHPExcel是用来操作Office Excel文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可以使用它来读取.写入不同格式的电子表格,如 Excel(BIFF) .xls, E ...

随机推荐

  1. 基于ubuntu16.04快速构建Hyperledger Fabric网络

    前言 最近在参加一个比赛,使用到了区块链的开源软件hyperledger,由于之前从未接触过区块链,以及和区块链开发相关的内容,所有在网上查阅了大量的资料,并且通过学习yeasy(杨宝华)开源的入门书 ...

  2. PAT1121:Damn Single

    1121. Damn Single (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue "Dam ...

  3. Shiro入门之一 -------- Shiro权限认证与授权

    一  将Shirojar包导入web项目 二 在web.xml中配置shiro代理过滤器 注意: 该过滤器需要配置在struts2过滤器之前 <!-- 配置Shiro的代理过滤器 -->  ...

  4. 虚拟机搭建CentOS主机win10通过xshell连接

    目标:主机是win10系统,虚拟机搭建CentOS,在主机上通过XShell连接操作. 第一步 主机上安装虚拟机 第二步 下载CentOS 下载地址http://101.110.118.69/isor ...

  5. strace详解及实战

    详细参数: -c 统计每一系统调用的所执行的时间,次数和出错的次数等. -d 输出strace关于标准错误的调试信息. -f 跟踪由fork调用所产生的子进程. -ff 如果提供-o filename ...

  6. PHP 7.3 我们将迎来灵活的 heredoc 和 nowdoc 句法结构

    php.net RFC 频道已经公布了 PHP 7.3 的 Heredoc 和 Nowdoc 语法更新,此次更新专注于代码可读性: Heredoc 和 Nowdoc 有非常严格的语法,有些时候这令很多 ...

  7. 【译文】CSS技术：如何正确的塑造button样式！

    , but useful for */ display: inline-block; text-align: center; text-decoration: none; /* create a sm ...

  8. 运维监控利器Nagios之：nagios配置详解

    http://ixdba.blog.51cto.com/2895551/752870 一.nagios配置过程详解 1.nagios默认配置文件介绍  nagios安装完毕后,默认的配置文件在/usr ...

  9. 我的Python之旅第三天

    一 编码操作 1 编码 enconde() 英文字符编码为"utf-8"时,一个字符占一个字节. s1='abcdef' b1=s1.encode('utf-8') print(b ...

  10. mysql按条件 导出sql

    mysqldump还有一个参数,就是--where 指定条件,这样我们就可以对一张表里的某些符合条件的数据,进行备份,导出.sql文件了 mysqldump -u root -p DB_Name -- ...