Question

我正在处理以下css代码

.Console{ 
    background: blue;
    display: block;      
    box-shadow:  0px 12px 15px -2px #692;
    list-style-type: none;
    width: 200px;            
    height: 50px;
}

我想要的是为背景的每个角添加特定颜色。那可能吗？

Answer 1

根据你的评论不太清楚......

基本上你有一个带有四个角的修剪矩形，每个角需要它自己的插入颜色

您可以使用border：

#el { border-width: 5px; border-color: red blue green orange; }

您还可以添加多个box-shadow：

#el { box-shadow: 1px 1px red, 1px 1px green, 1px 1px blue; }

Answer 2

您可以使用以下css属性

边框顶色，左边框颜色右边框的颜色，下边框色

Answer 3

试试吧。

border-width: 30px 30px 30px 30px;

您可以调整此行来修改边框花样。尝试每侧的0px以上的值。它将改变边界的形状，这将创造出超乎想象的好风格。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

.sssssss{
background-color:#FFFF33;/*yellow*/
line-height:10px;
vertical-align:middle;
text-align:center;
border-style: solid; 
border-width: 30px 30px 30px 30px; 
border-right-color: #FF0000;/*red*/
border-bottom-color: #000;/*black*/
border-top-color: #00F;/*blue*/
border-left-color: #0F6; /*green*/
}
</style>
</head>
<body>
<div  class="sssssss">erulerjgnio;jerglerg</div>
</body>
</html>

enter image description here

border-width: 70px 20px 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-right-color: #DBDFEC;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;

此修改的结果如下

enter image description here

盒子阴影和背景

3 个答案: