<!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. PAT1052:Linked List Sorting

    1052. Linked List Sorting (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A ...

  2. @component @bean区别

    from: http://stackoverflow.com/questions/10604298/spring-component-versus-bean http://stackoverflow. ...

  3. 数据分析之---Python可视化工具

    1. 数据分析基本流程 作为非专业的数据分析人员,在平时的工作中也会遇到一些任务:需要对大量进行分析,然后得出结果,解决问题. 所以了解基本的数据分析流程,数据分析手段对于提高工作效率还是非常有帮助的 ...

  4. xml序列化和反序列化（二）

    上篇讲到关于xml入参实体序列化,下面给出出参实体反序列化,代码如下: /// <summary> /// 反序列化 /// </summary> /// <param ...

  5. Tar专题

    下面的脚本根据当前的系统时间生成压缩文件名,并备份文件到指定目录: DIR=/www/webbackup/web/ FILE_NAME=`date +%y%m%d%H` FILE_NAME=$DIR/ ...

  6. jmeter使用csv进行参数化（二）

    上篇说的是csv的第一种方法进行参数化,这篇说第二种方法. 重新打开录制好的脚本. 1.提取函数变量 打开选项--函数助手对话框 设置对话框参数: 选择csvread,然后将变量文件的路径填写进来.添 ...

  7. react,react native,webpack,ES6,node.js----------今天上午学了一下node.js

    http://www.yiibai.com/nodejs/node_install.html---node.js具体入门资料在此 Node JS事件循环 Node JS是单线程应用程序,但它通过事件和 ...

  8. jQuery学习之旅 Item1 选择器【一】

    点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...

  9. kafka实战

    1.       kafka介绍 1.1.       主要功能 根据官网的介绍,ApacheKafka®是一个分布式流媒体平台,它主要有3种功能: 1:It lets you publish and ...

  10. 学习笔记1－－响应式网页＋Bootstrap起步＋全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...