20170307 第十三课时 盒模型之border设置

作业:用CSS控制DIV的边框画一个三角形

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型之border讲解</title>
<style >
div{
width: 1500px;
height: 500px;
background-color: #87CEFA;
/这是四条边框都使用同一效果的情况下:border:5px solid pink;/
border-top: 4px dashed #191970;/顶部的边框效果,border-right等类似/
/也可以单独设置边框三要素之一,比如颜色/
border-style: solid;
border-left-color: pink;
border-top-width: 10px;
}
</style>
</head>
<body>
<div>
盒子的border三要素:宽(border-width),形状(border-style)(实线solid、虚线dashed、立体等,可以在CSS参考手册中“边框”的“border-style”中查到),颜色(border-color)
</div>
</body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...
    Jackson_yee_阅读 353评论 0 0
  • 本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!! 博客地址 点击跳转...
    西巴撸阅读 558评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,213评论 0 11
  • 每个人都渴望成功,成功到底靠什么?有的人在学成功学的歪路,有的人尝试在失败中找到答案!我们今天解开成功的两大怪象,...
    职场魔盒阅读 2,086评论 3 0
  • 下午我和妈妈一起在家打扫卫生。我们需要打扫地面卫生、打扫阳台、收拾东西、擦桌子、擦冰箱等等。 我的任务...
    Bonnie枭阅读 235评论 0 1