<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
    border:100px solid gray;
    border-top-color:red;
    border-bottom-color:green;
    border-right-color:blue;
    border-left-color:yellow;
    width:200px;
    height:300px;

}
</style>
</head>
<body>
    <div >

    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
    border:100px solid gray;
    border-top-width:40px;
    border-right-width:60px;
    border-bottom-width:80px;
    border-left-width:100px;
    border-top-color:red;
    border-bottom-color:green;
    border-right-color:blue;
    border-left-color:yellow;
    width:200px;
    height:300px;

}
</style>
</head>
<body>
    <div >

    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
    border:100px solid gray;
    border-top-color:red;
    border-bottom-color:green;
    border-right-color:blue;
    border-left-color:yellow;
    border-radius: 100px;
    width:0;
    height:0;
}
</style>
</head>
<body>
    <div >

    </div>
</body>
</html>

CSS之border的更多相关文章

  1. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  2. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  3. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

  4. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  5. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  6. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  7. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  8. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  9. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  10. css之border,dispaly

    border:即为边框设置 solid:实线 dashed:虚线 dotted:圆点线 css代码: .c1{ width: 100%; height: 50px; border: 25px dott ...

随机推荐

  1. CF460 A. Vasya and Socks

    A. Vasya and Socks time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. Uva401Palindromes

      Palindromes  A regular palindrome is a string of numbers or letters that is the same forward as ba ...

  3. Visual Studio: 暂时？绕过 fatal error C1083: Cannot open precompiled header file

    可以使用右键点击项目工程中的该cpp文件,选择setting,在c/c++栏,选择PreCompiled headers,然后设置第一选项,选择不使用预编译头.

  4. Mariadb 数据库写入中文乱码问题

    从其他表里面导入数据,出现中文乱码错误.之前操作时并没有碰到类似问题,有些不得其解. 在网上搜了下,最后参考这篇文章,在执行insert前,先执行 set names gbk; 然后成功插入. 链接: ...

  5. Ipad 日程管理APP使用心得

    1. Fetchnotes 界面简单干净,操作简单: 可以使用标签hashtags #来进行管理: 比较好的用户使用指南Tutorial: 可以与好友分享,只需要@somebody即可 2. Lume ...

  6. HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

    一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为  lzwme.manifest,内容配置参考如下: 01 CACHE ...

  7. Android 定位地理坐标体系

    参考: 中国特色 火星坐标 iOS 火星坐标相关整理及解决方案汇总 百度地图坐标转换API 地球坐标系 (WGS-84) 到火星坐标系 (GCJ-02)百度坐标系 (BD-09) 的转换算法 火星坐标 ...

  8. iebugs产生的原因，zoom：1的作用

    zoom:1是针对ie的属性,可以激活hasLayout属性,关于hasLayout haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在Intern ...

  9. 【HDU】4336 Card Collector

    http://acm.hdu.edu.cn/showproblem.php?pid=4336 题意:n张卡片,每一次取一个盒子,盒子里装有卡片i的概率是p[i],求得到所有卡片所需要开的盒子的期望数( ...

  10. SolrCloud-5.2.1 集群部署及测试

    一. 说明 Solr5内置了Jetty服务,所以不用安装部署到Tomcat了,网上部署Tomcat的资料太泛滥了. 部署前的准备工作: 1. 将各主机IP配置为静态IP(保证各主机可以正常通信,为避免 ...