利用css样式完成下图所示的，请用css实现下图样式

利用CSS对边框属性的设置完成下图显示样式.

先通过css类选择器选择到div来控制div的宽度和高度和背景颜色(没有边框时方便看出来div的大小)。 通过div 的border属性控制边框颜色，设置border的宽度为2px，线型为实线，颜色为蓝色。

可以用border-color属性设置span和div的边框颜色，用background属性控制span和div的背景颜色。

border-style属性用于设置元素边框的样式，可以同时为一个元素的四个边框设置样式，或者单独地为各边设置边框样式。只有当该属性的值不是 none 时边框才可能出现。

相关问答

Q1: 求教大神,css应该怎么布局才能实现下图的布局和hover的特效

维持块级元素可设置宽高，但又能像内联元素一样和其他内联元素置于一行。盒模型 如何定位——相对定位、绝对定位、浮动相对定位：指相对于文档流中的其他已定义的元素位置进行定位。

制作div+css网页前思考布局：首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。

左边固定，右边自适应布局的两种实现方式效果图如下：大屏展示：小屏展示： 第一种实现方式通过负边距与浮动 实现左边固定，右边自适应的布局。

实现的主要效果是利用伪类标签，以及hover，利用transfromm trition实现动画效果。

并赋予类名：源代码到这里就完成了，接着就是css样式（采取的外联）：效果图（两个小盒子为了看的清楚，没有设置背景仅仅是设了边框）：你只要修改相应的css数据即可完成布局。

Q2: 如何用css制作图片自上而下落下来的动画?

在 HTML 中创建门和灯笼的元素，并给这些元素添加类名。例如：门灯笼 在 CSS 中为门添加打开的样式。例如，可以使用 transform 属性来旋转门：.door {transform： rotate(90deg)；} 为灯笼添加动画样式。

【推荐课程：CSS3教程】制作背景图片我们可以利用电脑中的画图软件，绘画上你想绘制的图案，比如像小星星，雪花，爱心等等。

不需要任何手动写代码，只需要在通过设置属性表单，预览结果，然后将符合预期的简单代码复制粘贴到自己的CSS文件即可。

利用css样式完成下图所示的的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于请用css实现下图样式、利用css样式完成下图所示的的信息别忘了在本站进行查找喔。