箱陰影和背景

我在下面的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

箱陰影和背景

回答

相關問題