箱阴影和背景

我在下面的CSS代码箱阴影和背景

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

我要的工作是一个特定的颜色添加到背景的每个角落。那可能吗？

来源

2012-02-19 Johnny Hankgard

如果你不介意加入4个不同的div，是的。 CSS没有任何背景属性，只会专门为角落着色。 – Edwin 2012-02-19 01:11:09

我其实不介意。你的意思是我将它们嵌套在一起？如何做到这一点，很难看到结构。 – 2012-02-19 01:14:21

你是指背景每个角落的颜色？像一个渐变？像柔和的灯光效果？你有没有你想要达到的效果的具体例子？现在这个问题没有意义。 – 2012-02-19 01:16:30

基于您的评论这是不是很清楚......

基本上你有四角修剪矩形，每个角都需要自己的插图颜色

你可以使用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; }

来源

2012-02-19 01:23:14 elclanrs

伟大的人，这正是我需要的。 – 2012-02-19 01:25:52

很高兴工作！随时接受答案。 – elclanrs 2012-02-19 01:30:39

您可以使用下面的CSS属性

边框顶部的颜色，左边框颜色右边框颜色，底部边框颜色

来源

2012-02-19 02:43:41 Prabhavith

试试吧。

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

来源

2012-03-03 09:21:20

对于最后一个例子#DBDFEC给出的页面背景以及我的右侧边框颜色 – 2012-03-03 09:33:39

箱阴影和背景

回答

相关问题