<!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. Robot framework之元素定位实战

    1.1  id 和name 定位 Web页面都是由许多标签和元素组成的,每个标签或元素都是很多属性,好比一个人   id 和name 可以看作一个人的身份证号和姓名.下面看下教育局招生系统的用户名输入 ...

  2. 第三次 orm自动建表及遇到的问题

    Hibernate支持自动建表,在开发阶段很方便,可以保证hbm与数据库表结构的自动同步. 方法很简单,在hibernate.cfg.xml内加入 <property name="hi ...

  3. tensorflow 1.8, ubuntu 16.04, cuda 9.0, nvidia-390，安装踩坑指南。

    被tensorflow 1.8, ubuntu 16.04, cuda 9.0, nvidia-390折磨了5天,终于上坑,留下指南,造福后人. 1.先把依赖搞清楚: tensorflow 1.8依赖 ...

  4. elasticsearch x-pack

    elasticsearch-plugin.bat install x-pack D:\elasticsearch-5.5.3\bin>elasticsearch-plugin.bat insta ...

  5. 基于.net core实现项目自动编译、并生成nuget包

    近期想对自己的项目增加自动编译并生成nuget包,网上资料不少.但总还有迷糊的时候.首先:此解决方案包含多种版本的项目,如:有编译必须是x86平台,以及还有传统的.net foramework项目,以 ...

  6. Collection集合详解

    /*Collection--List:元素是有序的,元素可以重复.因为该集合体系有索引. ---ArrayList;底层的数据结构使用的是数组结构.特点:查询速度很快.但是增删很慢.线程不同步 --- ...

  7. 系列博文-LowPoly风格的图像生成器

    https://github.com/Ovilia/Polyvia http://www.zhihu.com/question/29856775/answer/57668656 http://zhan ...

  8. 通过配置tomcat实现项目免部署

    对于一些比较大的项目,比如说使用了EXTJS这种重量级UI框架的项目,在部署的时候,eclipse会卡崩的,所以可以通过配置tomcat来实现免部署,直接运行即可: 首先找到tomcat的localh ...

  9. javascript this 的工作原理

    JavaScript 有一套完全不同于其它语言的对 this 的处理机制. 在五种不同的情况下 ,this 指向的各不相同. 1.全局范围内 当在全部范围内使用 this,它将会指向全局对象. 2.函 ...

  10. HTML5 CSS3 专题 : 拖放 （Drag and Drop）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...