<!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. CSS中的变形、过渡、动画效果

    一.变形 .过渡效果 1:元素平移 x方向 y方向 transform:translate(100px 100px); 2:过渡动画效果 a:什么属性参与过渡效果 b:过渡时间 c:过渡的效果 值包含 ...

  2. WEB自动化(Python+selenium)的API

    在做Web自动化过程中,汇总了Python+selenium的API相关方法,给公司里的同事做了第二次培训,分享给大家                                         ...

  3. Java并发之ReentrantLock

    一.ReentrantLock简介 ReentrantLock字面意义上理解为可重入锁.那么怎么理解可重入这个概念呢?或者说和我们经常用的synchronized又什么区别呢? ReentrantLo ...

  4. 关于内核转储(core dump)的设置方法

    原作者:http://blog.csdn.net/wj_j2ee/article/details/7161586 1. 内核转储作用 (1) 内核转储的最大好处是能够保存问题发生时的状态. (2) 只 ...

  5. SSM-SpringMVC-07：SpringMVC中处理器映射器

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- BeanNameUrlHandlerMapping和SimpleUrlHandlerMapping BeanN ...

  6. SSM-MyBatis-08：Mybatis中SqlSession的commit方法为什么会造成事物的提交

      ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 如题目所示,本小章节讨论为什么SqlSession的commit会造成事物的提交 首先先看SqlSessi ...

  7. Python 枚举

    1. 枚举的定义 首先,定义枚举要导入enum模块.枚举定义用class关键字,继承Enum类.用于定义枚举的class和定义类的class是有区别. 示例代码: from enum import E ...

  8. TestNG进行接口测试，脚本及可维护性框架

    注: 以下内容引自http://blog.csdn.net/u010321474/article/details/49977969 TestNG进行接口测试,脚本及可维护性框架 原创 2015年11月 ...

  9. bzoj 3680 吊打xxx 模拟退火

    第一道模拟退火 重心嘛,就是要找到一个点,使其到所有点距离*该点权值和最小 思路:初始化一个T,mint,当T大于mint时,每次随机一个解,如果解比当前解优,直接转移,否则,以某概率(与T正相关)转 ...

  10. UOJ_274_[清华集训2016]温暖会指引我们前行_LCT

    UOJ_274_[清华集训2016]温暖会指引我们前行_LCT 任务描述:http://uoj.ac/problem/274 本题中的字典序不同在于空串的字典序最大. 并且题中要求排序后字典序最大. ...