<!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. myeclipse操作记录

    myeclipse里面jsp页面里面js注释快捷键 ctrl + shift +cctrl + / MyEclipse 每次保存都要building workspace的解决方法 方法一:菜单栏-&g ...

  2. ural 1143. Electric Path

    1143. Electric Path Time limit: 1.0 secondMemory limit: 64 MB Background At the team competition of ...

  3. iOS学习36数据处理之SQLite数据库

    1. 数据库管理系统 1> SQL语言概述 SQL: SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集, 是一种功能齐全的 ...

  4. ccc 调试方法

    当修改完一个函数,但是不知道哪个函数调用的时候没有传递正确的参数的时候 需要找出调用这个函数的所有语句,于是我注释掉这个函数就可以了

  5. BZOJ4426 : [Nwerc2015]Better Productivity最大生产率

    如果一个区间包含另一个区间,那么这两个区间是否在一起的生产率是一样的. 将所有这种包含了其他区间的区间放入数组$b$,其余的放入数组$c$,有多个相同的时候则从$b$移一个到$c$. 那么$c$里所有 ...

  6. BZOJ 1355 & KMP

    BZOJ放这种丝帛我也是醉了... 不过来填一下求最小循环节的坑... 以这道题为例,相同文本串粘起来的串中取一小节,可以把任意一个字符看做文本串头. 那么我们一次KMP求出next函数然后显见,最后 ...

  7. bzoj 1217 [HNOI2003]消防局的设立 Label：图论

    题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...

  8. Java_关于App class loader的总结

    Java本身是一种设计的非常简单,非常精巧的语言,所以Java背后的原理也很简单,归结起来就是两点: 1.JVM的内存管理 理解了这一点,所有和对象相关的问题统统都能解决 2.JVM Class Lo ...

  9. nodejs之async异步编程

    1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等. 示例:  for (v ...

  10. Jquery用法

    $this.closest("dd").addClass("selected").siblings().removeClass("selected&q ...